对于JQuery中的serialize()、serializeArray()、param()方法和map()

对于JQuery中的serialize()、serializeArray()和param()方法

介绍背景: 在我们提交form表单时,如果参数较少,我们可以一项项获取,但当参数很大时,这样的做法就是浪费时间了.
下面介绍的是如何一次获取到所有参数的方法

1. serialize()方法

定义和用法
serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

---

语法:
$(selector).serialize()

---

示例

  <form>
      <input type="text" name="username" value="zhangsan">
      <input type="text" name="age" value="18">
      <input type="text" name="job" value="liulang">
      <select name="area">
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
      </select>
      <input type="submit">
    </form>
    <script type="text/javascript">
    $('form').submit(function() {
      var a= $(this).serialize();
      console.log(a);  //username=zhangsan&age=18&job=liulang&area=1
      return false;
    });
    </script>

得到的结果: “name1=value1&name2=value2”

---

2.serializeArray()方法

定义和用法
serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。
您可以选择一个或多个表单元素（比如 input 及/或 textarea），或者 form 元素本身。

---

语法:
$(selector).serializeArray()

---

示例

  <form>
      <input type="text" name="username" value="zhangsan">
      <input type="text" name="age" value="18">
      <input type="text" name="job" value="liulang">
      <select name="area">
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
      </select>
      <input type="submit">
    </form>
      <script type="text/javascript">
    $('form').submit(function() {
      var a= $(this).serializeArray();
      console.log(a);  
      //[{name: "username", value: "zhangsan"},{name: "age", value: "18"},{name: "job", value: "liulang"},{name: "area", value: "0"}]
      return false;
    });
    </script>

得到的结果:
[{“name”:”name1”,”value”:”value1”},{“name”:”name2”,”value”:”value2”}]

//将数组转换成json格式,封装
serializeJSON = function(id) {
  var paramJson = {};
  var paramArr = $(id).serializeArray();
  $(paramArr).each(function(index, obj) {
    paramJson[obj.name] = obj.value;
  });
  return paramJson;
};

用法: serializeJSON (id);

3.param()方法

定义和用法
$.param(obj)可以将serializeArray()生成的结果转化为serialize()的结果形式
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

---

语法:
$.param(obj);

---

示例

  <form>
      <input type="text" name="username" value="zhangsan">
      <input type="text" name="age" value="18">
      <input type="text" name="job" value="liulang">
      <select name="area">
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
      </select>
      <input type="submit">
    </form>
    <script type="text/javascript">
    $('form').submit(function() {
      var a= $(this).serializeArray();
      var b = $.param(a);
      console.log(b); //username=zhangsan&age=18&job=liulang&area=0
      return false;
    });
    </script>

得到的结果: “name1=value1&name2=value2”

4.map()方法

定义和用法
map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。是遍历方式的一种

---

语法:
$(selector).map（function(index，obj){

}）;

---

示例

  <form>
      <input type="text" name="username" value="zhangsan">
      <input type="text" name="age" value="18">
      <input type="text" name="job" value="liulang">
      <select name="area">
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
      </select>
      <input type="submit">
    </form>
      <script type="text/javascript">
    $(':input').map(function(index,obj) {

       console.log(typeof obj);
       //得到5个 object

       console.log(obj.value);
       //得到zhangsan,18,liulang,0,"";

       console.log(obj.name);
       //username,age,job,area,"";
    });

得到的结果: 遍历到多个jQ对象,可以通过属性调用得到属性值