jQuery教程(19)-jquery ajax操作之序列化表单

jQuery教程(19)-jquery ajax操作之序列化表单

文章标签: jquery-ajax, jquery
2015-1-15 13:18:23     159人阅读    

序列化表单
         向服务器发送数据经常会涉及用户填写表单。常规的表单提交机制会在整个浏览器窗口中加 载响应,而使用jQueiy的Ajax工具箱则能够异步地提交表单,并将响应放到当前页面中。
         为了试验,需要构建一个简单的表单:

<div class="letter" id="letter-f">
<h3>F</h3>
<form action="f.php">
<input type="text" name="term" value="" id="term" />
<input type="submit" name="search" value="search" id="search" />
</form>
</div>

           这一次,需要把提供的搜索词语作为字典中词条的子字符串来搜索,并从PHP脚本中返回一 组词条。我们将使用e.php中的build_entry()函数返回与前面相同的数据结构,但在f.php中稍 微修改一下相应的逻辑:

<?php
$output = array();
foreach ($entries as $term => $entry) {
if (strpos($term, strtoupper($_REQUEST[,term'])) !== FALSE) {
$output[] = build_entry($term, $entry);
}
}
if (!empty($output)) {
echo implode("\n", $output);
} else {
echo '<div class="entry">Sorry, no entries found for '; echo '<strong>' . $_REQUEST['term'] . '</strong>.';
echo '</div>';
}
?>

              其中,调用的strpos()函数会扫描与提供的搜索字符串匹配的单词。接下来,我们可以通 过遍历DOM树来响应表单提交并构造适当的查询字符串,如代码清单6-13所示。
代码清单6-13

$(document).ready(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请求传递的查询字符串。通过使 用.serialized方法,可以把前面的提交处理程序一般化为如代码清单6-14所示。
代码清单6-14

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

            这样,即使在增加表单中字段的情况下,同样的脚本仍然能够用于提交表单。例如,如果我 们搜索“fid”就会出现包含这个子字符串的词条,如图6-10所示。

图 6-10

jQuery教程(19)-jquery ajax操作之序列化表单_第1张图片

你可能感兴趣的:(jQuery教程(19)-jquery ajax操作之序列化表单)