表单 使用serializeArray获取所有:

<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>
$('#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"

这里我们可以直接在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"这样的就可以了。

ajax data参数的更多相关文章

  1. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

  2. ASP.NET jquery ajax传递参数

    第一种:GET传递 前台 ajax   GET 传递 :即在请求的地址后面加上参数,URL地址长度有显示,安全性低 后台接收:Request.QueryString[“参数名字”]! 例如: func ...

  3. datatable 的ajax修改参数,post可以传参处理

          datatables常用参数记录 {                "searchable": false,                "orderabl ...

  4. Spring MVC Ajax 复杂参数的批量传递

    要解决的问题: 如何组织客户端参数? Ajax 方法的配置属性如何定义才能传递复杂参数? 基于 SpringMVC 的服务端该如何接收? MyBatis 怎么处理批量更新? 客户端脚本 viewMes ...

  5. jquery中的ajax方法参数

    引用来自:http://www.cnblogs.com/tylerdonet/p/3520862.html jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String ...

  6. jQuery中$.ajax()方法参数解析

    本文实例为大家讲解了jQuery $.ajax()方法参数,供大家参考,具体内容如下 $.ajax({ url:'test.do', data:{id:123,name:'xiaoming'}, ty ...

  7. 如何在 ajax 外拿到 ajax 的数据???和ajax的参数

    第一步:  var 变量名 = $.ajax({ url: "发送请求的地址", dataType: 'json', type: 'post', async: false }) 第 ...

  8. Ajax请求参数较长导致请求失败

    Ajax请求参数比较长,第5行参数大概1100个字符吧,是接口的请求报文. $.ajax({ type:"POST", url:"${ctx}/test.action?m ...

  9. $.ajax 方法参数总是记不住,在这里记录一下

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

随机推荐

  1. android之Notification通知

    我们在用手机的时候,如果来了短信,而我们没有点击查看的话,是不是在手机的最上边的状态栏里有一个短信的小图标提示啊?你是不是也想实现这种功能呢?今天的Notification就是解决这个问题的. pac ...

  2. Quartz.net 2.x 学习笔记01

    Quartz.net 2.0 2012年4月9日发布了Released版本,到目前(2014-12-08)为止是2.3版 Quartz.net 项目地址:http://www.quartz-sched ...

  3. ByteBuf 类——Netty 的数据容器

    1.堆缓冲区 2.直接缓冲区 3.复合缓冲区 —CompositeByteBuf——实现了这个模式,它提供了一 个将多个缓冲区表示为单个合并缓冲区的虚拟表示 适用于 JDK 所使用的一种称为分散/收集 ...

  4. html 文字垂直居中

    html  文字垂直居中 <span style="float:right; padding-right:30px;line-height:64px" class=" ...

  5. python开发socket套接字:套接字&通信循环&链接循环&模拟远程命令

    一,套接字 先从服务器端说起.服务器端先初始化Socket,然后与端口绑定(bind),对端口进行监听(listen),调用accept阻塞,等待客户端连接.在这时如果有个客户端初始化一个Socket ...

  6. linux输入子系统之按键驱动

    上一节中,我们讲解了Linux  input子系统的框架,到内核源码里详细分析了输入子系统的分离分层的框架等. 上一节文章链接:http://blog.csdn.net/lwj103862095/ar ...

  7. ORACLE GoldenGate在Windows与AIX平台ORACLE的单向、双向数据传输配置及其测试

    第1章...... GoldenGate概述 1.1         GoldenGate技术原理 1.2         GoldenGate可靠的复制 1.3         GoldenGate ...

  8. 获取Request.Form所有内容

    string wwww = "";        for (int i = 0; i < Request.Form.Count; i++)        {          ...

  9. vue-cli中的babel配置文件.babelrc详解

    本文介绍vue-cli脚手架工具根目录的babelrc配置文件 介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 ba ...

  10. 一.volatile关键字

    一.volatile关键字的原理 使用volatile关键字增加了实例变量在多个线程之间的可见性.但volatile的最致命的缺点是不支持原子性. synchronized代码块具有volatile同 ...