jQuery.serializeArray() 函数详解

serializeArray()函数用于序列化一组表单元素,将表单内容编码为一个JavaScript数组

serializeArray()函数常用于将表单内容序列化为JSON对象,以便于被编码为JSON格式的字符串。

该函数会将可用于提交的每个表单控件封装成一个Object对象,该对象有name和value属性,对应该表单控件的name和value属性。然后将这些Object对象封装为一个数组并返回。

该函数不会序列化不需要提交的表单控件,这和常规的表单提交行为是一致的。例如:不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

与常规表单提交不一样的是:常规表单一般会提交带有name的按钮控件,而serializeArray()函数不会序列化带有name的按钮控件。更多详情请点击这里

该函数属于jQuery对象(实例)。

语法

jQuery 1.2 新增该函数。

jQueryObject.serializeArray( )

返回值

serializeArray()函数的返回值为Array类型,返回将表单元素编码后的JS数组。

示例&说明

<form name="myForm" action="http://www.365mini.com" method="post">
    <input name="uid" type="hidden" value="1" />
    <input name="username" type="text" value="张三" />
    <input name="password" type="text" value="123456" />
    <select name="grade" id="grade">
        <option value="1">一年级</option>
        <option value="2">二年级</option>
        <option value="3" selected="selected">三年级</option>
        <option value="4">四年级</option>
        <option value="5">五年级</option>
        <option value="6">六年级</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" />男
    <input name="sex" type="radio" value="0" />女
    <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    <input name="hobby" type="checkbox" value="3" />羽毛球
    <input name="btn" id="btn" type="button" value="点击" />
</form>

 对<form>元素进行序列化可以直接序列化其内部的所有表单元素。

var formArray = $("form").serializeArray();
/* 以下是序列化后的结果数组formArray的内容:
[
    { name: "uid", value: "1" },
    { name: "username", value: "张三" },
    { name: "password", value: "123456" },
    { name: "grade", value: "3" },
    { name: "sex", value: "1" },
    { name: "hobby", value: "1" },
    { name: "hobby", value: "2" }
];
*/

 我们也可以直接对部分表单元素进行序列化。

var result = $(":text, select, :checkbox").serializeArray();
/* 以下是序列化后的结果数组result的内容:
[ 
    { name: "username", value: "张三" }, 
    { name: "password", value: "123456" },
    { name: "grade", value: "3" },
    { name: "hobby", value: "1" },
    { name: "hobby", value: "2" }
];
*/

 

 

serializeArray():

 方法通过序列化表单值来创建对象数组(名称和值)。

您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身。

详细说明

serializeArray() 方法序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据。

注意:此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。

返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值为空
]

  

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("form").serializeArray();
    $.each(x, function(i, field){
      $("#results").append(field.name + ":" + field.value + " ");
    });
  });
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>

<button>序列化表单值</button>
<div id="results"></div>
</body>
</html>

  运行结果:

 

 

 

 

 

 

serialize() :

定义和用法

serialize() 方法将表单内容序列化为字符串。

语法

.ajaxStop([callback])
参数描述
callback 被调用的函数。

详细说明

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。表单元素有几种类型:

<form>

  <div><input type="text" name="a" value="1" id="a" /></div>

  <div><input type="text" name="b" value="2" id="b" /></div>

  <div><input type="hidden" name="c" value="3" id="c" /></div>

  <div>

    <textarea name="d" rows="8" cols="40">4</textarea>

  </div>

  <div><select name="e">

    <option value="5" selected="selected">5</option>

    <option value="6">6</option>

    <option value="7">7</option>

  </select></div>

  <div>

    <input type="checkbox" name="f" value="8" id="f" />

  </div>

  <div>

    <input type="submit" name="g" value="Submit" id="g" />

  </div>

</form>

  .serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>。不过,选择 <form> 标签本身进行序列化一般更容易些:

$('form').submit(function() {

  alert($(this).serialize());

  return false;

})

  输出标准的查询字符串:

a=1&b=2&c=3&d=4&e=5

注释:只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。

posted @ 2015-03-06 18:10  a757956132  阅读(1949)  评论(0编辑  收藏  举报