jQuery 之 serialize() serializeArray()

Posted 天天向上吧

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 之 serialize() serializeArray()相关的知识,希望对你有一定的参考价值。

  jQeury提供了2个帮助获取表单元素数据的方法。分别是serialize()  和 serializeArray()。两者作用完全相同,只不过是返回值不同,前者是返回一个字符串,后者返回一个Json对象数组。直接看例子,一目了然。

  1.表单结构代码

<form id="form1">
    <input type="text" name="uName"  value="老王">
    <input type="password" name="pwd"  value="123456">
    <input type="text" name="phone" value="13555558888">
    <input type="submit" id="btn" value="提交数据">
</form>

  2.js代码

 //引入必要的jquery依赖js 上面已经说过jquery中包含完整的ajax
<script src="/static/jquery1.12.min.js"></script>
<script>
    $(document).ready(function () {
        //点击提交按钮 打印两种序列化方式出来的字符串
        $("#btn").click(function () {
            //打印字符串序列化表单
            console.log($("#form1").serialize());
            //打印json数据格式序列化表单
            console.log($("#form1").serializeArray())
        }) 
</script>

  3.输出结果

  jQuery会自动搜索到form1中的所有表单元素,然后获取到对应的value值。这里需要注意的是,所有的表单元素在获取时,是以name属性为准的,不是以id属性为准。

  serialize()的输出结果是:uName=老王&pwd=123456&phone=13555558888。

  serializeArray()的输出结果是:[{"uName" :  "老王"}, {"pwd" : "123"}, {"phone" : "13555558888"}] 

  

以上是关于jQuery 之 serialize() serializeArray()的主要内容,如果未能解决你的问题,请参考以下文章

玩转web之json---将表单通过serialize()方法获取的值转成json

jQuery:serialize() 表单和其他参数

jQuery的序列化元素 serialize()方法 serializeArray()方法 param()方法

Jquery serialize()提交多个表单数据

JQuery $('form').serialize() 在 $('div.container').load() 之后不起作用

Jquery插件之ajaxForm简介