jQuery中的Ajax----04 | 易学教程

一、serialize()方法

做项目的过程中，表单是必不可少的，经常用来提供数据，例如注册、登录等。常规的方法是使表单提交到另一个页面，整个浏览器都会被刷新，而使用ajax技术则能够异步地提交表单，并将服务器返回的数据显示在当前页面中。

表单的HTML代码如下：

<form id="form1" action="#">
  <p>评论：</p>
  <p>姓名：<input type='text' name="username" id="username" /></p>
  <p>内容：<textarea name="content" id="content" rows="2" cols="20"></textarea></p>
  <p><input type="button" id="send" value="提交" /></p>
</form>

为了获取姓名和内容，必须将字段的值逐个添加到data参数中：

$("#send").click(function(){
  $.get("get.php",{
  username:$("#username").val(),
  content:$("#content").val()
  }),function(data,textStatus){
  $("#id").thml(data);      //将返回的数据添加到页面上
  });
})

这种方式在只有少量字段的表单中，勉强还可以使用，但如果表单元素越来越复杂，使用这种方式在增大工作量的同时页使表单缺乏弹性。jquery为这一常用的操作提供了一个简化的方法——serialize()。与jquery中其他方法一样，serialize()方法也是作用域一个jquery对象，它能够将DON元素内容序列化为字符串，用于ajax请求。通过使用serialize()方法，可以把刚才的jquery代码改为如下：

$("#send").click(function(){
  $.get("get.php",$("#form1").serialize(),function(data,textStatus){
    $("#id").html(data);
  })
})

即使在表单中再增加字段，脚本仍然能够使用，并且不需要做其他多余工作。因为serialize()方法作用于jquery对象，所以不光只有表单能够使用它，其他选择器选取的元素也能够使用它：

$(":checkbox,:radio").serialize();

把复选框和单选框的值序列化为字符串形式，只会将选中的值序列化。

二、serializeArray()方法

该方法不是返回字符串，而是将DOM序列化后，返回JSON格式的数据。既然是一个对象，那么就可以使用$.each()函数对数据进行迭代输出。

三、$.param()方法

它是serialize()方法的核心，用来对一个数据或对象按照key/value进行序列化。如：

var obj={a:1,b:2,c:3}
var k=$.param(obj);
alert(k);//输出a=1&b=2&c=3

来源：oschina

链接：https://my.oschina.net/u/2269966/blog/384395

标签

jquery

serialize