Home  >  Article  >  Web Front-end  >  jQuery 序列化表单 serialize()和serializeArray()使用方法

jQuery 序列化表单 serialize()和serializeArray()使用方法

WBOY
WBOYOriginal
2016-06-01 09:54:501327browse

1.serialize()方法

格式:var data = $("form").serialize();

功能:将表单内容序列化成一个字符串。

这样在ajax提交表单数据时,就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize() 即可。

实例:

<code class="language-javascript">
<form method="post" id="form1">
    <input type="text" name="category" value="php"><br>
    <input type="text" name="content" value="myphp"><br>
    <select name="list">
      <option value="1">123</option>
      <option value="2" selected>23</option>
      <option value="3">43</option>
    </select>
    <input type="button" name="btn" id="btn" value="button"><br>
</form>

<script src="/Public/js/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  
    $("#btn").click(function(){
		alert($("#form1").serialize());
    });

})
</script></code>

你可以复制代码到这里运行查看结果。

运行结果:

<code>category=php&content=myphp&list=2</code>

 

2.serializeArray()方法

格式:var jsonData = $("form").serializeArray();

功能:将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。

实例:

<code class="language-javascript"><form method="post" id="form1">
    <input type="text" name="category" value="php"><br>
    <input type="text" name="content" value="myphp"><br>
    <select name="list">
      <option value="1">123</option>
      <option value="2" selected>23</option>
      <option value="3">43</option>
    </select>
    <input type="button" name="btn" id="btn" value="button"><br>
</form>

<script src="/Public/js/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  
    $("#btn").click(function(){
      var data=$("#form1").serializeArray();//json对象
      //解析json对象
      for(var i in data){
          for(var j in data[i]){
              alert(j+":"+data[i][j]);
          }
      }
    });

})
</script></code>

同样,你可以复制代码到这里运行查看结果。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn