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的跟随屏幕滚动代码
Jul 24 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
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
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
php中final关键字用法分析
2016/12/07 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
PHP7新特性
2021/03/09 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
分析Python读取文件时的路径问题
2018/02/11 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python PyQt5整理介绍
2020/04/01 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
高级销售求职信
2014/02/21 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
浅析Python中的套接字编程
2021/06/22 Python
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle