首页 > 代码库 > jQuery 序列化表单

jQuery 序列化表单

<div class="letter" id="letter-f">    <h3>F</h3>    <form action="f.php">        <input type="text" name="term" value="" id="term">        <button type="submit">Search</button>    </form></div>
$(function () {    $(‘#letter-f form‘).submit(function (event) {        event.preventDefault();        $.get(‘f.php‘, { ‘term‘: $(‘input[name="term"]‘).val() }, function (data) {            $(‘#dictionary‘).html(data);        });    });});

   虽然以上代码能够实现预期的效果,但通过名称属性逐个搜索输入字段并将字段的值添加到对象中总是有点麻烦。特别是随着表单变得更复杂,这种方法也会明显变得缺乏扩展性。好在,jQuery 为这种常用的操作提供了一种简化方式—— .serialize() 方法。这个方法作用于一个 jQuery 对象,将匹配的 DOM 元素转换成能够随 Ajax 请求传递的查询字符串。

$(function () {    $(‘#letter-f form‘).submit(function (event) {        event.preventDefault();        var formValues = $(this).serialize();        $.get(‘f.php‘, formValues, function (data) {            $(‘#dictionary‘).html(data);        });    });});

 

jQuery 序列化表单