jquery拼接ajax 的json和字符串拼接的方法


Posted in Javascript onMarch 11, 2017

整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享。

jQuery拼接字符串ajax

<form id="myForm" action="#">
  <input name="name"/>
  <input name="age"/>
  <input type="submit"/>
</form>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
  (function($){
    $.fn.serializeJson=function(){
      var serializeObj={};
      $(this.serializeArray()).each(function(){
        serializeObj[this.name]=this.value;
      });
      return serializeObj;
    };

    $('#myForm').bind('submit',function(e){
      console.log($(this).serializeJson())
    })
  })(jQuery)

</script>

或者直接用$(“#表单id”).serialize()直接序列化。。。

上面的插件,不能适用于有多个值的输入控件,例如复选框、多选的select。下面,我将插件做进一步的修改,让其支持多选。代码如下:

Js代码

(function($){
  $.fn.serializeJson=function(){
    var serializeObj={};
    var array=this.serializeArray();
    var str=this.serialize();
    $(array).each(function(){
      if(serializeObj[this.name]){
        if($.isArray(serializeObj[this.name])){
          serializeObj[this.name].push(this.value);
        }else{
          serializeObj[this.name]=[serializeObj[this.name],this.value];
        }
      }else{
        serializeObj[this.name]=this.value;
      }
    });
    return serializeObj;
  };
})(jQuery);

这里,我将多选的值封装为一个数值来进行处理。如果大家使用的时候需要将多选的值封装为“,”连接的字符串或者其他形式,请自行修改相应代码。

测试如下:

表单:

Html代码

<form id=”myForm” action=”#”>
      <input name=”name”/>
      <input name=”age”/>
      <select multiple=”multiple” name=”interest” size=”2″>
      <option value =”interest1″>interest1</option>
      <option value =”interest2″>interest2</option>
      <option value=”interest3″>interest3</option>
      <option value=”interest4″>interest4</option>
      </select>
      <input type=”checkbox” name=”vehicle” value=”Bike” /> I have a bike
      <input type=”checkbox” name=”vehicle” value=”Car” /> I have a car
      <input type=”submit”/>
      </form>

测试结果:

{age: “aa”,interest: ["interest2", "interest4"],name: “dd”,vehicle:["Bike","Car"]}

<form id="myForm" action="#">
  <input name="name" value="111"/>
  <input name="age" value="2222"/>
  <button type="submit">tijiao</button>
</form>
</body>

<script src="../js/jquery-1.11.0.min.js"></script>
<script>
  var dataId = $("#myForm input").map(function (){
    // return($(this).attr("id"));
    return($(this).attr("name")+'='+$(this).val());
  }).get().join("&");
  alert(dataId);
  </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 #Javascript
前端开发之CSS原理详解
Mar 11 #Javascript
JS实现简易刻度时钟示例代码
Mar 11 #Javascript
js鼠标跟随运动效果
Mar 11 #Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 #Javascript
基于Node.js的WebSocket通信实现
Mar 11 #Javascript
js原生Ajax的封装和原理详解
Mar 11 #Javascript
You might like
redis 队列操作的例子(php)
2012/04/12 PHP
php标签云的实现代码
2012/10/10 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
js字符串转成JSON
2013/11/07 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
python中的闭包用法实例详解
2015/05/05 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
django用户登录和注销的实现方法
2018/07/16 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
python创建子类的方法分析
2019/11/28 Python
PyTorch的torch.cat用法
2020/06/28 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
JPA的特点
2014/10/25 面试题
大学生的自我鉴定范文
2014/01/21 职场文书
企业员工薪酬方案
2014/06/04 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
学校食堂标语
2014/10/06 职场文书
大学副班长竞选稿
2015/11/21 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js