JQuery.Ajax()的data参数类型实例详解


Posted in Javascript onNovember 20, 2015

假如现在有这样一个表单,是添加元素用的。

<form id='addForm' action='UserAdd.action' type='post'>
   <label for='uname'>用户名</label>:<input type='text' name='uname' id='uname'><br>
   <label for='mobileIpt'>手机号:</label><input type='text' name='mobileIpt' id='mobileIpt'><br>
   <label for='birthday'>生日:</label><input type='text' name='birthday'><br>
   <input type='button' value='提交' onclick='addUser()'>
</form>

我们不想使用表单submit的方式添加这个元素,我们就想使用ajax提交。

以前我们是这样实现的:

function addUser(){
    var user = {
      uname:$("#uname").val(),
      mobileIpt:$("#mobileIpt").val(),
      birthday:$("#birthday").val()
    };
    $.ajax({
      url:'UserAdd.action',
      data:user,
      type:'post',
      dataType:'text',
      success:function(msg){
        if(msg=='1'){
          console.log('添加成功');
        }else{
          console.log('添加失败')
        }
      }
    })
  }

这没有什么错,就是获取表单元素的值实在是太麻烦....这里只有三项,很多项的时候就废了....

直到有一天,我发现了jquery的serializeArray方法

序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
注意,此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。
返回的JSON对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对——name参数和value参数(如果value不为空的话)。

我们来试试看

$('#addForm').serializeArray();
//返回数据结构,是json数组,每个对像分别name和value为key,代表这个表单元素的name和value
[
  {"name":"uname","value":""},
  {"name":"mobileIpt","value":""},  
  {"name":"birthday","value":""}
]

这个貌似用不上啊

我们使用JQuery.param()方法处理一下:

var arr = $('#addForm').serializeArray();
$.param(arr);
"uname=alice&mobileIpt=110&birthday=1983-05-12"

嘿这下符合我们的需求了吧,虽然不是json类型,但是至少可以作为data上传了。

这里我们可以直接在ajax的data处填上这个json数组,在jquery内部自己调用$.param()处理的。

我们来看下jquery.param()方法的说明:

返回值:StringjQuery.param(obj,[traditional])
将表单元素数组或者对象序列化。
参数
obj,[traditional]
数组或jQuery对象会按照name/value对进行序列化,普通对象按照key/value对进行序列化。
traditional:是否使用传统的方式浅层序列化。
demo:
$.param({uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'});
"uanme=vic&mobileIpt=110&birthday=2013-11-11"

看着说明,貌似也跟我们没关系啊,我们换一个json数组来看

$.param([{uanme:'vic'},{mobileIpt:'110'},{birthday:'2013-11-11'}]);
"undefined=&undefined=&undefined="

这个转换不成功了吧,为什么我们表单的那种数据能够成功转换成url参数呢?我们来看下jquery源码

//在ajax()方法中,对json类型的数据进行了$.param()处理
if ( s.data && s.processData && typeof s.data !== "string" ) {
  s.data = jQuery.param( s.data, s.traditional );
}
//param方法中
if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
    // Serialize the form elements
    jQuery.each( a, function() {
      add( this.name, this.value );
    });
  } else {
    // If traditional, encode the "old" way (the way 1.3.2 or older
    // did it), otherwise encode params recursively.
    for ( prefix in a ) {
      buildParams( prefix, a[ prefix ], traditional, add );
    }
  }

这下明白了吧,如果是json数据,那么挨个循环,只取他们的name属性和value属性拼接字符串。

如果是普通对象,循环该对象的属性,然后拼接字符串。

总结:

所以,本文要说的是,在jquery的ajax函数中,可以传入3种类型的数据

1.文本:"uname=alice&mobileIpt=110&birthday=1983-05-12"

2.json对象:{uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'}

3.json数组:

[
  {"name":"uname","value":"alice"},
  {"name":"mobileIpt","value":"110"},  
  {"name":"birthday","value":"2012-11-11"}
]

所以,我们可以一键获取表单并提交,非常方便。

补充:

其实提取表单数据的话只需要serialize()方法直接获取"uname=alice&mobileIpt=110&birthday=1983-05-12"这样的就可以了。

ps:jquery中ajax方法data参数的用法小结

$.ajax({
  type: post,
  url: some.php,
  data: name=john&location=boston, //第一种方式传参
 // data: {name:john,location:boston} //第二种方式传参
 // data: {foo:[bar1, bar2]} 转换为 '&foo=bar1&foo=bar2'
 /*
 第一种我们用url传参,参数里面如果加带&这个符号地话,可能参数接收不到或不完整,
 如“ data: name=john&location=boston,” 如果name地值是john&smith这样写可能就会有问题,
 我们可以用js里面地encodeuricomponent()方法进行转义,
 但如果用data: {name:john,location:boston}这种方式写地话就不需要进行转义,
 如果转义地话,接收地将是转义后地字符串
 */
  success: function(msg){
   alert( data saved: + msg );
  }
});
Javascript 相关文章推荐
js修改input的type属性问题探讨
Oct 12 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
Vue实现日历小插件
Jun 26 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 #Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 #Javascript
jquery实现手风琴效果
Nov 20 #Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 #Javascript
jquery背景跟随鼠标滑动导航
Nov 20 #Javascript
JavaScript获取浏览器信息的方法
Nov 20 #Javascript
JavaScript性能优化之小知识总结
Nov 20 #Javascript
You might like
php学习笔记之基础知识
2014/11/08 PHP
php检测url是否存在的方法
2015/04/14 PHP
php把数组值转换成键的方法
2015/07/13 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python实现从订阅源下载图片的方法
2015/03/11 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
python获取list下标及其值的简单方法
2016/09/12 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
Python3中的bytes和str类型详解
2019/05/02 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
python基于event实现线程间通信控制
2020/01/13 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
幼师求职自荐信范文
2014/01/26 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
初二学习计划书范文
2014/04/27 职场文书
无毒社区工作方案
2014/05/23 职场文书
Golang入门之计时器
2022/05/04 Golang