Home > Article > Web Front-end > jQuery 序列化表单 serialize()和serializeArray()使用方法
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>
同样,你可以复制代码到这里运行查看结果。