JQuery AJax序列化元素

原创 2015年11月17日 16:43:06

在jQuery中,当我们使用ajax时,常常需要拼装input数据以键值对(Key / Value)的形式发送到服务器,用JQuery的serialize方法可以轻松的完成这个工作,使用这个方法可以将表单序列化为键值对(key1=value1&key2=value2…)后提交。

W3School方法介绍 serialize()方法

1、serialize()方法

    该方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表单元素集合的JQuery对象。可以选择一个或多个表单元素(如input或者文本框),或者form元素本身。序列化的值可在生成AJax请求时用于URL查询字符串中。

$(selector).serialize()
说明如下:

该方法创建以标准URL编码表示的文本字符串,它的操作对象是代表表单元素集合的JQuery对象;

对于其他选择器选取的元素也可以使用它。

// 把复选框和单选框的值序列化为字符串形式,只会将选中的值序列化
$(':checkbox, :radio').serialize()
另外,form里面的name不能使用JS JQuery中的关键字。如果name="length"将不能正确获得值
2、serializeArray()方法

该方法不是返回字符串,而是将dom元素序列化后,返回JSON格式的数据

<div>
    <input type="radio" name="test" value="A">
    <input type="radio" name="test" value="B">
    <input type="radio" name="test" value="C">
    <input type="radio" name="test" value="D">
    <input type="radio" name="test" value="E">
</div>
JS 代码

var fields = $(':radio').serializeArray();
console.log(fields);
3、$.param()方法

它是serialize()方法的核心,用来对一个数组或者对象按照key / value进行序列化

var obj = {a:1, b:2, c:3};
var k = $.param(obj);
console.log(k);
// 输出结果为    "a=1&b=2&c=3"
版权声明:本文为博主原创文章,未经博主允许不得转载。

表单用serialize()序列化并且通过ajax向后台传值,后台方法参数传递问题

首先是页面 此页面时一个表单 只要是选中的数据,就往后台传,没选中但是有数据,则不传递。此页面的代码如下 ...
  • sdzhangshulong
  • sdzhangshulong
  • 2016年02月18日 11:23
  • 17080

Ajax序列化表单

Ajax非常方便与后台交互,其data字段,就是传送给后台的数据,如何实现data的易用与便携呢?...
  • u010137431
  • u010137431
  • 2015年06月11日 09:29
  • 851

jquery ajax的serialize()值的序列化以及反序列化

html节点:                                                     姓名:                             ...
  • u012767607
  • u012767607
  • 2016年10月24日 17:11
  • 4658

AJAX之Json序列化

1       AJAX之Json序列化 /* AJAX传递复杂数据结构如果按自己进行格式定义的话会经历组装,解析的过程,比较麻烦,其实AJAX中有一个数据的传输标准Json. ...
  • zhangj391
  • zhangj391
  • 2016年07月12日 14:32
  • 727

jq之serialize()序列化字符串ajax提交到,php端获取

1.input编辑框批量修改 {$article['id']} ...
  • u012493556
  • u012493556
  • 2017年02月24日 15:34
  • 1302

给Ajax一个漂亮的嫁衣——Ajax系列之五(下)之序列化和反序列化

Ajax最强悍的功能莫过于服务器和客户端之间的异步交互,他们在交互的时候不是通过soap协议等,而是通过回调函数,以Json的格式传送数据。     由于Json格式的限制,在很多情况下,稍微复...
  • lmdcszh
  • lmdcszh
  • 2012年07月25日 18:41
  • 3050

表单用serialize()序列化并且通过ajax向后台传值,后台方法参数传递问题

首先是页面 此页面时一个表单 只要是选中的数据,就往后台传,没选中但是有数据,则不传递。此页面的代码如下 ...
  • sdzhangshulong
  • sdzhangshulong
  • 2016年02月18日 11:23
  • 17080

【AJAX】使用serialize()方法序列化表单元素值

我觉得这是个只可意会不可言传的方法,感觉不知道做啥,还不如直接看例子稍微能理解点。 使用serialize()方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用...
  • happyhaojie
  • happyhaojie
  • 2016年04月07日 02:16
  • 1251

将表单序列化之后变成的json格式的数据无法通过Ajax发送到后台的解决

问题描述:动态生成的表格,封装到同一个form之中,每个input 必须有name属性,当使用jquery提供的serialize()方法将所有name-value自动生成之后,再对其进行人为的替换,...
  • sinat_28771747
  • sinat_28771747
  • 2016年09月12日 10:45
  • 2421

jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求。 DOCTYPE html> html> head lang="en"> ...
  • dyllove98
  • dyllove98
  • 2015年01月20日 11:44
  • 1216
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery AJax序列化元素
举报原因:
原因补充:

(最多只允许输入30个字)