jquery ajax 序列化表单

最新推荐文章于 2021-08-05 15:28:35 发布

原创最新推荐文章于 2021-08-05 15:28:35 发布 · 223 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery ajax 序列化

原创专栏收录该内容

4 篇文章

订阅专栏

本文详细解释了HTML表单如何通过序列化功能转换为URL编码文本字符串，并展示了使用jQuery简化此过程的方法。重点阐述了如何利用序列化功能获取表单数据，以及如何在实际场景中应用这一技术，例如验证用户输入或发送表单数据到服务器。

checkbox 如果不设定值，默认选中值为on；设定值之后，选中则为设定的值

<input type="checkbox" name="favor" id="favor" checked="checked"/>
$("#favor").val()=="on"  //true
<input type="checkbox" name="favor" id="favor" value="1" checked="checked"/>
$("#favor").val()=="1" //true

$(selector).serialize()

方法通过序列化表单值，创建 URL 编码文本字符串。

<script src="jquery-1.7.min。js"></script>
<script>
$(function(){
   $("#submit").click(function(){
     alert($("#myForm").serialize());//输出username=admin&password=admin123
   });
});
</script>
<form id="myForm">
昵称 <input type="text" name="username" value="admin" /><br />
密码 <input type="password" name="password" value="admin123" /><br />
<input type="button" id="submit" value="序列化表单" /> 
</form>

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

<input type="checkbox" name="favor1" id="favor" value="1"/>
<input type="checkbox" name="favor2" id="favor" value="1" checked="checked"/>
$(":checkbox").serialize();//输出favor2=1

$.param()

方法创建数组或对象的序列化表示。

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

$(selector).serializeArray()

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

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