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