首页 > 代码库 > jquery serialize()、serializearray()已经$.param方法
jquery serialize()、serializearray()已经$.param方法
serialize:
序列表表格内容为字符串,用于 Ajax 请求。可以对整个form,也可以只针对某部分。
HTML 代码:
<p id="results"><b>Results: </b> </p><form> <select name="single"> <option>Single</option> <option>Single2</option> </select> <select name="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" name="check" value="http://www.mamicode.com/check1"/> check1 <input type="checkbox" name="check" value="http://www.mamicode.com/check2" checked="checked"/> check2 <input type="radio" name="radio" value="http://www.mamicode.com/radio1" checked="checked"/> radio1 <input type="radio" name="radio" value="http://www.mamicode.com/radio2"/> radio2</form>
jQuery 代码:
$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );
$(‘#form‘).submit(function(event){
event.preventDefault();
$.ajax({
url:‘ ‘,
type:‘post‘,
data:$("form").serialize(),
}
参考:http://api.jquery.com/serialize/
serializeArray():
Encode a set of form elements as an array of names and values.
定义和用法
serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。
您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身。
语法
$(selector).serializeArray()
serializeArray() 方法序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据。
注意:此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。
返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:
[ {name: ‘firstname‘, value: ‘Hello‘}, {name: ‘lastname‘, value: ‘World‘}, {name: ‘alias‘}, // 值为空]
.serializeArray() 方法使用了 W3C 关于 successful controls(有效控件) 的标准来检测哪些元素应当包括在内。特别说明,元素不能被禁用(禁用的元素不会被包括在内),并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。
该方法可以对已选择单独表单元素的对象进行操作,比如 <input>, <textarea>, 和 <select>。不过,更方便的方法是,直接选择 <form> 标签自身来进行序列化操作。
$("form").submit(function() { console.log($(this).serializeArray()); return false;});
上面的代码产生下面的数据结构(假设浏览器支持 console.log):
[ { name: a value: 1 }, { name: b value: 2 }, { name: c value: 3 }, { name: d value: 4 }, { name: e value: 5 }]
取得表单内容并插入到网页中:
<p><b>Results:</b> <span id="results"></span></p><form> <select name="single"> <option>Single</option> <option>Single2</option> </select> <select name="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select> <br> <input type="checkbox" name="check" value="check1" id="ch1"> <label for="ch1">check1</label> <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"> <label for="ch2">check2</label> <input type="radio" name="radio" value="radio1" checked="checked" id="r1"> <label for="r1">radio1</label> <input type="radio" name="radio" value="radio2" id="r2"> <label for="r2">radio2</label></form> <script> function showValues() { var fields = $( ":input" ).serializeArray(); $( "#results" ).empty(); jQuery.each( fields, function( i, field ) { $( "#results" ).append( field.value + " " ); }); } $( ":checkbox, :radio" ).click( showValues ); $( "select" ).change( showValues ); showValues();</script> </body></html>
$(
":input"
) 选择所有的表单输入元素,包括input, textarea, select 和 button.
参考:
http://www.w3school.com.cn/jquery/ajax_serializearray.asp
http://api.jquery.com/serializeArray/
$.params()
序列化一个 key/value 对象:
var params = { width:1900, height:1200 };var str = jQuery.param(params);$("#results").text(str);
结果:
width=1680&height=1050
参考:http://www.w3school.com.cn/jquery/ajax_param.asp