jquery使用serialize()方法提交表单数据实例

  时间:2017-03-24
本文章向大家介绍jquery使用serialize()方法提交表单数据,需要的朋友可以参考一下。

经常用到jQuery的$.post方法提交数据,觉得非常好用,特别是提高用户体验的场景。

提交之前可以验证数据修改数据,提交成功或者失败能够及时反馈到用户界面

有如下一个表单,

<form action="save.php" method="post">
    <input type="text" name="username[]" value="Jason" />
    <input type="text" name="username[]" value="Tom" />
    <input type="text" name="username[]" value="Goe" />

    <br />
    <label><input type="checkbox" name="book[]" value="Learn" />Lear</label>
    <label><input type="checkbox" name="book[]" checked="checked" value="PHP" />PHP</label>
    <label><input type="checkbox" name="book[]" value="Program" />Program</label>

    <br />
    <label><input type="radio" name="sex[]" checked="checked" value="Female" />Female</label>
    <label><input type="radio" name="sex[]" value="Male" />Male</label>
    <label><input type="radio" name="sex[]" value="Unknown" />Unknown</label>

    <br />
    <select name="order">
        <option value="first">first</option>
        <option value="second">second</option>
        <option value="third">third</option>
    </select>

    <p>&nbsp;</p>
    <button type="submit">提交</button>
</form>

save.php代码:

<?php
echo json_encode($_POST);

用serialize()方法提交:

$('form').on('submit',function(e) {
    e.preventDefault();
    var data = $(this).serialize();

    $.post('save.php', data, function(result) {
        $('p').text(result);
    });
});

返回数据:

{"username":["Jason","Tom","Goe"],"book":["PHP"],"sex":["Female"],"order":"first"}

原文地址:http://www.manongjc.com/article/1822.html