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 相关文章推荐
ext监听事件方法[初级篇]
Apr 27 Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
原生JavaScript创建不可变对象的方法简单示例
May 07 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
PHP VS ASP
2006/10/09 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
Mac安装python3的方法步骤
2019/08/09 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
python 制作本地应用搜索工具
2021/02/27 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
香港礼品网站:GiftU eshop
2017/09/01 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
中考标语大全
2014/06/05 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
升学宴学生答谢词
2015/01/05 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
创业计划书之熟食店
2019/10/16 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
MySQL系列之三 基础篇
2021/07/02 MySQL