jQuery序列化表单元素

最新推荐文章于 2023-02-01 18:20:37 发布

xuxinwen32

最新推荐文章于 2023-02-01 18:20:37 发布

阅读量445

点赞数

分类专栏：前端文章标签： jQuery序列化表单元素

本文链接：https://blog.youkuaiyun.com/xuxinwen32/article/details/78318659

版权

前端专栏收录该内容

40 篇文章

订阅专栏

本文介绍了使用jQuery中的serialize()和serializeArray()方法序列化表单数据的方法。通过实例展示了如何将表单数据转换为字符串或JSON对象数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery中如何序列化表单元素：
1、serialize()方法
描述：序列化表单内容为字符串。
格式 var form = $('#addAccountForm');
var formData = form.serialize();

2.serializeArray()方法
描述：serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。
您可以选择一个或多个表单元素（比如 input 及/或 textarea）
格式 var form = $('#addAccountForm');

var formData = form.serializeArray();

<form id="addAccountForm" >
<input type="text" name="username" value="aa" ><br /><br />
<input type="text" name="age" value="bb" ><br /><br />
<input type="text" name="address" value="cc" ><br /><br />
<input type="text" name="job" value="dd" ><br /><br />
<textarea name="content">hello world</textarea>
<input type="button" value="提交" οnclick="addData()" ><br /><br />
</form>

<script type="text/javascript">

function addData(){
/*序列化为字符串 username=aa&age=bb&address=cc&job=dd&content=hello world*/
var form = $('#addAccountForm');
var formData = form.serialize();
formData2 = formData.replace(/\+/g," "); //执行全局匹配,将有"+"号的地方替换成空格;
console.log(formData2); //+ 号显示多个

/*序列化为JSON对象 (5) [{…}, {…}, {…}, {…}, {…}]*/
/* var form = $('#addAccountForm');
var formData = form.serializeArray();
console.log(formData);*/

}
</script>