jQuery教程(17)-ajax操作之向服务器传递数据 执行GET请求

文章标签: jquery,jquery-ajax
2015-1-14 20:50:39     21 人阅读    

向服务器传递数据
          此前,我们的例子都是从Web服务器上取得静态的数据文件。然而,Ajax的价值只有当服务 器能够基于浏览器的输人动态形成数据时才能得到充分体现。在这种情况下,jQuery同样也能为 我们提供帮助;前面介绍的所有方法在经过修改之后,都可以实现双向的数据传送。


与服务器端代码交互
        由于示范这些技术需要同Web服务器进行交互,因此我们这里将首次用到服 务器端代码。在给定的例子中,我们使用PHP脚本编程语言,该语言使用非常普 遍而且能够免费取得。不过,我们不会在这里介绍如何设置支持PHP的Web服务 器,只是建议大家考虑XAMPP,下载地址为:http://www.apachefriends. org/en/xampp.htmi,这个包可以帮你迅速建立Web服务器。

 

执行GET请求
       为了示范客户端(使用JavaScript)与服务器(在我们这个例子中使用PHP)之间的通信,我 们要编写一个基于每次请求只向浏览器发送一个字典词条的脚本。词条的选择取决于从浏览器发 送到服务器的参数。服务器端脚本将从如下内部数据结构中提取相应的数据:

<?php
$entries = array(
'EAVESDROP' => array(
'part' => 'v.i.',
'definition' => 'Secretly to overhear a catalogue of the crimes and vices of another or yourself.',
'quote' => array(
'A lady with one of her ears applied',
'To an open keyhole heard, inside,',
'Two female gossips in converse free &mdash;',
'The subject engaging them was she.',
'"I think," said one, "and my husband thinks',
'That she\'s a prying, inquisitive minx!"',
'As soon as no more of it she could hear',
'The lady, indignant, removed her ear.',
'"I will not stay," she said, with a pout,',
'"To hear my character lied about!"',
),
'author' => 'Gopete Sherany',
),
'EDIBLE' => array(
'part' => 'adj.',
'definition' => 'Good to eat, and wholesome to digest, as a worm to a toad, a toad to a snake, a snake to a pig, a pig to a man, and a man to a worm.',
),
// and so on );
?>

            在这个例子的产品版中,这些数据可能会保存在数据库中,并基于每次请求加载相应的数据。 这里,由于我们把数据直接放在了脚本中,因此取得数据的代码非常直观。首先要对通过请求发 送的数据进行检查,然后再构建返回给浏览器显示的HTML片段:

<?php
if (isset($entries[strtoupper($_REQUEST['term'])])) {
$term = strtoupper($_REQUEST['term']);
$entry = $entries[$term];
echo build_entry($term, $entry);
} else {
echo '<div>Sorry, your term was not found.</div>';
}
function build_entry($term, $entry) {
$html = '<div class="entry">';
$html .= '<h3 class="term">';
$html .= $term;
$html .= '</h3>';
$html .= '<div class="partM>';
$html .= $entry['part'];
$html .= '</div>';
$html .= '<div class="definition">';
$html .= $entry['definition']; if (isset($entry['quote'])) {
foreach ($entry['quote'] as $line) {
$html .= '<div class="quote-line">'. $line .'</div>';
}
if (isset($entry['author'])) {
$html .= '<div class="quote-author">'.
$entry['author'] .'</div>';
}
}
$html .= '</div>';
$html .= '</div>'; return $html;
}


?>

          这样,当我们调用e.php来请求这个脚本时,它就会根据GET请求的参数返回相应的HTML 片段。例如,在使用e.php?term=eavesdrop请求这个脚本时,会得到如图6-7所示的HTML 片段。

ajax操作之向服务器传递数据 执行GET请求

图6-7
            同样,这与我们在本章前面曾经看到过的HTML片段一样,由于还没有应用CSS规则,所以 返回的HTML片段也缺少应有的样式。
            由于我们要展示如何向服务器传送数据,所以这里不再借助一直沿用的独立按钮,而是使用另外一种方式请求词条一构建一个由要查询的词语组成的链接列表,通过单击其中任何一个链 接,来加载相应的解释。下面是要添加到主页面中的HTML代码:

<div class="letter" id="letter-e">
<h3>E</h3>
<ul>
<li><a href=Me.php?term=EavesdropM>Eavesdrop</a></li> <li><a href="e.php?term=EdibleM>Edible</a></li>
<li><a href=Me.php?term=Education">Education</a></li> <li><a href=__e.php?term=Eloquence__>Eloquence</a></li> <li><a href=__e.php?term=Elysium__>Elysium</a></li>
<li><a href=Me.php?term=Emancipation">Emancipation</a> </li>
<li><a href=Me.php?term=Emotion">Emotion</a></li>
<li><a href=__e.php?term=Envelope__>Envelope</a></li> <li><a href=__e.php?term=Envy__>Envy</a></li>
<li><a href=__e.php?term=Epitaph__>Epitaph</a></li>
<li><a href=__e.php?term=Evangelist__>Evangelist</a></li>
</ul>
</div>

接下来,要通过JavaScript代码以正确的参数来调用前面的PHP脚本。虽然可以使用常规 的.load()机制在URL后面添加查询字符串,即通过类似e.php?term=eavesdrop这样的地址 直接取得数据。但是,在此我们想让jQuery基于我们提供给$.get()函数的对象来构建查询字符 串,参见代码清单6-10。
代码清单6-10

$(document).ready(function() {
$('#letter-e a').click(function(event) { event.preventDefault();
var requestData = {term: $(this).text()};
$.get('e.php', requestData, function(data) {
$('#dictionary').html(data);
});
});
});

          前面我们已经看到过jQuery提供的其他Ajax接口了,因此对这个函数的使用也应该熟悉。其 中唯一的差别是第二个参数,该参数是一个用来构建查询字符串的键和值的对象。在这个例子中,键始终是term,而值则取自每个链接的文本。现在,单击列表中的第一个链接会导致相应词语 的解释出现在页面中,如图6-8所示。

ajax操作之向服务器传递数据 执行GET请求


           值得一提的是,列表中的链接无论有无代码使用它们都已经带有了给定的地址。这样,就为禁用了或者无法使用JavaScript的用户提供了查询相关信息的替代方法(这也是一种渐进增强的 做法)。但在正常情况下,为了防止单击这些链接时打开新URL,我们在事件处理程序中调用 了 .preventDefault()方法。

 

返回false还是阻止默认动作
           在本章的click处理程序中,我们传入了 event对象并使用event. preventDefault()而不是return false结束该处理程序。当默认动作是重新 加载页面或打开新页面时,我们推荐这种做法。例如,如果click处理程序中包 含JavaScript错误,那么在第一行代码中(在碰到错误之前)阻止默认动作就能 确保不会提交表单,而且浏览器的错误控制台也会收到错误报告。第3章曾介绍 过,return false 意味着同时调用 event.preventDefault()和 event. stopPropagation()。因此要想停止事件冒泡,我们还得再调用后者。


原文地址:http://www.itmmd.com/201501/493.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

jQuery教程(18)-ajax操作之执行POST请求   上一篇
下一篇  jQuery教程(16)-ajax操作之加载XML文档

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!