jquery中serialize()

---

前言

我们在表单ajax请求中，往往会传递一些参数,要是一个个获取感觉很麻烦,于是jQuery提供serialize()方法，让我们可以方便快捷的获取到表单中想要的值。

一、定义和用法

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

您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

$("form").serialize()

二、使用

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

    <form action="">
        <p>用户名：<input type="text" name="mames"></p>
        <p>密码：<input type="text" name="pass"></p>
        <p>
            性别： <select name="sex" id="">
                 <option>男</option>
                 <option>女</option>
             </select>
        </p>
        <p>描述：<textarea id="" cols="30" rows="10" name="ms"></textarea></p>
        <p>
            <input type="button" value="提交" id="btn">
        </p>
    </form>
  

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

 <script src="./jquery-1.12.4.js"></script>
 $("#btn").click(function() {
            var pa = $("form").serialize()
            console.log(pa);

        })

通过上图可以看到输入中文乱码了,这是因为.serialize()自动调用了encodeURIComponent方法将数据编码了，解决办法就是调用decodeURIComponent(XXX,true);将数据解码。

pa = decodeURIComponent(pa, true);

三、注意事项

• 如果表单元素没有name属性 就获取不到(必须要有name属性)

<p>用户名：<input type="text" name="mames"></p>
<p>密码：<input type="text"></p>

• 必须要写在表单里面，即使有name也获取不到

 <form action="">
        <p>用户名：<input type="text" name="mames"></p>

        <p>
            <input type="button" value="提交" id="btn">
        </p>
    </form>
    <p>密码：<input type="text"></p>

• 获取不到上传的文件,如果想要获取，需要使用FormDate对象。

---