1. 程式人生 > >jQuery 中ajax 的 serialize() 方法

jQuery 中ajax 的 serialize() 方法

示例程式碼:

<form>
  <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>

結果:

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

說明:

(1)對於input會將name作為名傳送,value作為值傳送(可以有多個)

(2)對於textarea 會將name作為名傳送,value作為值傳送(可以有多個)

(3)對於select ,因為select的值就是選中的option的值,所以就不需要對於select只需要將select的name屬性節點賦值即可!

那麼傳遞的就是選擇的option的值(可以有多個)

(4):對於checkbox,如果checked=true,那麼傳遞的就是選擇的checkbx的值(可以有多個)

對於以上的都可以有多個相同的name,如果值有多個,那麼ajax分裝成key=value的形式,並且以 & 連線,後臺在接收的時候可以使用陣列來接收

 

使用場景

(1):select中的option的多個option時(量操作時,將被選中的option的需要的東西傳送到後臺)

舉例:

<select>

<option value="v1">測試option</option>

<option value="v1">測試option</option>

<select>

(2):可以批量提交被ckecked的checkBox中!(批量操作時,將被選中的checkbox的需要的東西,批量傳送到後臺)

舉例:

<input type="checkbox" name="測試box"  value="測試box" checked>

<input type="checkbox" name="測試box"  value="測試box" >