jquery ajax serialize()執行個體

來源:互聯網
上載者:User

.serialize()
 returns: string
 description: encode a set of form elements as a string for submission.

version added: 1.0.serialize()

運行在一個jquery代表一種形式的元素的集合對象。該表格元素可以是以下幾種類型

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

serialize()方法就可以處理一個jquery對象,選擇了個人表單元素,如<input>的,<textarea>,和<選擇。但是,它通常更容易選擇<form>標記為序列化本身:

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});


this produces a standard-looking query string:

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

只有"成功控制"被序列化到字串。沒有提交按鈕的值被序列化的形式,因為沒有提交使用按鈕。對於表單元素的值被序列化字串中包含的元素必須有一個名稱屬性。從檔案中選擇元素中的資料是不會被序列化。

例如:
序列化形式的查詢字串,這可能是一個ajax請求發送到伺服器。


<!doctype html>
<html>
<head>
  <style>
  body, select { font-size:12px; }
  form { margin:5px; }
  p { color:red; margin:5px; font-size:14px; }
  b { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></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>
    function showvalues() {
      var str = $("form").serialize();
      $("#results").text(str);
    }
    $(":checkbox, :radio").click(showvalues);
    $("select").change(showvalues);
    showvalues();
</script>

</body>
</html>

 

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。