serialize

Module

Method

io.serialize()
string serialize ( elements )
序列化一系列表单元素为可提交的字符串
Parameters:elements (string|Array<HTMLElement>|HTMLElement|KISSY.NodeList) – 代表表单元素(input form select ...)的集合,参数格式同 query()
Returns:序列化后的字符串
Return type:string

Note

是否真的要使用该方法? ajax 提交的话可以直接设置 form 参数

该方法返回一个将表单元素 url 编码过的字符串,表单元素通常包括 <input> <textarea> <select> ,或者直接对整个 <form> 元素的所有表单子孙元素进行序列化

例如以下 html :
<form id='f'>
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f" />
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>

运行

KISSY.ready(function(S){
    S.log(IO.serialize("#f"));
});

可得到如下字符串:

a=1&b=2&c=3&d=4&e=5

也可以只序列化一部分

KISSY.ready(function(S){
    S.log(IO.serialize(S.all("#f").all("input")));
});

可得到如下字符串:

a=1&b=2&c=3

Note

  1. 该方法不会自动去重,重复的元素会产生具有重复部分的产生串
  2. 只有 successful controls 会被序列化为字符串. 因为表单不是用提交按钮提交的,那么提交按钮不会被序列化。只有具备 name 属性的元素才可能被序列化。文件上传元素不会被序列化

Demo

实时动态序列化整个 form

<!DOCTYPE html>
<html>
<head>
    <style>
        button { margin:10px; }
        div { color:blue; font-weight:bold; }
        span { color:red; }
    </style>

    <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>
 <form>
    <select name="single">
      <option>Single</option>
      <option>Single2</option>
    </select>

<br />
    <select name="multiple" multiple="multiple">
      <option selected="selected">Multiple</option>
      <option>Multiple2</option>

      <option selected="selected">Multiple3</option>
    </select>
<br/>
    <input type="checkbox" name="check" value="check1" id="ch1"/>

    <label for="ch1">check1</label>

    <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>

    <label for="ch2">check2</label>
<br />
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>

    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2"/>

    <label for="r2">radio2</label>
  </form>
  <p><tt id="results"></tt></p>


<script>
    KISSY.use('node,io',function (S,Node,IO) {
        var $=Node.all,form=$("form");
        function showValues() {
          var str = IO.serialize(form);
          $("#results").text(str);
        }

        $("input").on("click",showValues);
        $("select,input").on("change",showValues);
        showValues();
    });
</script>

</body>
</html>