jQuery教程(17)-ajax操作之向服务器传递数据 执行GET请求
文章标签： jquery,jquery-ajax
2015-1-14 20:50:39 21 人阅读
向服务器传递数据
此前，我们的例子都是从Web服务器上取得静态的数据文件。然而，Ajax的价值只有当服务 器能够基于浏览器的输人动态形成数据时才能得到充分体现。在这种情况下，jQuery同样也能为 我们提供帮助；前面介绍的所有方法在经过修改之后，都可以实现双向的数据传送。
与服务器端代码交互
由于示范这些技术需要同Web服务器进行交互，因此我们这里将首次用到服 务器端代码。在给定的例子中，我们使用PHP脚本编程语言，该语言使用非常普 遍而且能够免费取得。不过，我们不会在这里介绍如何设置支持PHP的Web服务 器，只是建议大家考虑XAMPP，下载地址为： 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 —',
'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 片段。
图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>
相关文章
精彩导读
热门资讯
关注我们
