您的位置：首页 > Web前端 > JQuery

【练习向】jQuery基础教程第四版课后练习——Book06_jQuery_通过Ajax发送数据

2013-11-27 10:27 766 查看

要完成以下练习，需要此书本章的index.html文件以及complete.js中包含的已经完成的JavaScript代码。可以从Packt Publishing网站下载这些文件。

“挑战”练习有一些难度，完成这些练习的过程中可能需要参考jQuery官方文档

重要：chorme不支持本地的ajax的调用，所以在做本章本地ajax测试的时候请换用IE或者Firefox浏览器。

index.html原图

(1)页面加载后，把exercises-content.html的主体(body)内容提取到页面的内容区域。

$(document).ready(function(){
$('#dictionary').load('exercises-content.html .letter');//在这里就先提取到index.html里dictionary区域里了，如果要换区域，更改这里的id('#dictionary')或者class即可

});

练习一完成效果图

(2)不要一次就显示整个文档，请为左侧的字母列表创建“提示条”，当用户鼠标放到字母上时，从exercises-content.html中加载与该字母有关的内容。

$(document).ready(function(){
$('h3').mouseover(function(){
var letter_id = $(this).parent().attr('id');
$('#dictionary').load('exercises-content.html #' + letter_id);
});
});

练习二完成效果图

(3)为页面加载添加错误处理功能，在页面的内容区显示错误消息。修改脚本，请求does-not-exist.html而不是exercises-content.html，以测试错误处理功能。

$(document).ready(function(){
$('h3').mouseover(function(){
var letter_id = $(this).parent().attr('id');
$('#dictionary').load('does-not-exist.html #' + letter_id, function(response, status, xhr){
if(status == 'error'){
var msg = 'Sorry but there was an error: ';
$('#dictionary').html(msg + xhr.status + ' ' + xhr.statusText );
};
});//因为.load()没有提供错误回调参数，所以不能给.load()后连缀.fail()方法，所以参考jQuery API (http://api.jquery.com/load/)方法完成.load()错误处理。
});
});

练习三完成效果图

(4)挑战：页面加载后，向GitHub发送一个JSONP请求，取得某个用户代码库的列表。把每个代码库的名称和URL插入到页面的内容区。取得jQuery项目代码库的URL是http://api.github.com/users/jquery/repos。

$(document).ready(function(){
$.getJSON('https：//api.github.com/users/jquery/repos', function(data){
var html = '';
$.each(data, function(jsonIndex, json_val){
html += '<ul style="list-style-type:none;">' + (jsonIndex + 1);
html += '<li>name: ' + json_val.name + '</li>';
html += '<li>html_url: ' + json_val.html_url + '</li>';
html += '</ul>';
});
$('#dictionary').html(html);
});
});

[align=left] [/align]

练习四完成效果图

下面将本章练习可能用到的文件代码提供如下：

index.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>The Devil's Dictionary</title>

<link rel="stylesheet" href="06.css" type="text/css" />

<script src="jquery.js"></script>
<script src="06.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h2>The Devil's Dictionary</h2>
<div class="author">by Ambrose Bierce</div>
</div>

<div class="letters">
<div class="letter" id="letter-a">
<h3><a href="entries-a.html">A</a></h3>
</div>
<div class="letter" id="letter-b">
<h3><a href="entries-b.html">B</a></h3>
</div>
<div class="letter" id="letter-c">
<h3><a href="entries-c.html">C</a></h3>
</div>
<div class="letter" id="letter-d">
<h3><a href="entries-d.html">D</a></h3>
</div>
<div class="letter" id="letter-e">
<h3>E</h3>
<ul>
<li><a href="e.php?term=Eavesdrop">Eavesdrop</a></li>
<li><a href="e.php?term=Edible">Edible</a></li>
<li><a href="e.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="e.php?term=Emancipation">Emancipation</a></li>
<li><a href="e.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>
<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>
<div class="letter" id="letter-g">
<h3><a href="entries-g.html">G</a></h3>
</div>
<div class="letter" id="letter-h">
<h3><a href="entries-h.html">H</a></h3>
</div>

</div>
<div id="dictionary">
</div>

</div>
</body>
</html>

complete.js

$(document).ready(function() {
$('#letter-a a').click(function(event) {
event.preventDefault();

$.ajaxSetup({
url: 'a.html',
type: 'POST',
dataType: 'html'
});

$.ajax({
type: 'GET',
success: function(data) {
$('#dictionary').html(data);
}
});
});

$('#letter-b a').click(function(event) {
event.preventDefault();
$.getJSON('b.json', function(data) {
var html = '';
$.each(data, function(entryIndex, entry) {
html += '<div class="entry">';
html += '<h3 class="term">' + entry.term + '</h3>';
html += '<div class="part">' + entry.part + '</div>';
html += '<div class="definition">';
html += entry.definition;
if (entry.quote) {
html += '<div class="quote">';
$.each(entry.quote, function(lineIndex, line) {
html += '<div class="quote-line">' + line + '</div>';
});
if (entry.author) {
html += '<div class="quote-author">' + entry.author + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
});
$('#dictionary').html(html);
});
});

$('#letter-c a').click(function(event) {
event.preventDefault();
$.getScript('c.js');
});

$('#letter-d a').click(function(event) {
event.preventDefault();
$.get('d.xml', function(data) {
$('#dictionary').empty();
$(data).find('entry').each(function() {
var $entry = $(this);
var html = '<div class="entry">';
html += '<h3 class="term">' + $entry.attr('term');
html += '</h3>';
html += '<div class="part">' + $entry.attr('part');
html += '</div>';
html += '<div class="definition">';
html += $entry.find('definition').text();
var $quote = $entry.find('quote');
if ($quote.length) {
html += '<div class="quote">';
$quote.find('line').each(function() {
html += '<div class="quote-line">';
html += $(this).text() + '</div>';
});
if ($quote.attr('author')) {
html += '<div class="quote-author">';
html += $quote.attr('author') + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
$('#dictionary').append($(html));
});
});
});

$('#letter-e a').click(function(event) {
event.preventDefault();
var requestData = {term: $(this).text()};
$.get('e.php', requestData, function(data) {
$('#dictionary').html(data);
}).fail(function(jqXHR) {
$('#dictionary')
.html('Sorry, but an error occurred: ' + jqXHR.status)
.append(jqXHR.responseText);
});
});

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

var url = 'http://examples.learningjquery.com/jsonp/g.php';
$('#letter-g a').click(function(event) {
event.preventDefault();
$.getJSON(url + '?callback=?', function(data) {
var html = '';
$.each(data, function(entryIndex, entry) {
html += '<div class="entry">';
html += '<h3 class="term">' + entry.term + '</h3>';
html += '<div class="part">' + entry.part + '</div>';
html += '<div class="definition">';
html += entry.definition;
if (entry.quote) {
html += '<div class="quote">';
$.each(entry.quote, function(lineIndex, line) {
html += '<div class="quote-line">' + line + '</div>';
});
if (entry.author) {
html += '<div class="quote-author">' + entry.author + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
});
$('#dictionary').html(html);
});
});

$('#letter-h a').click(function(event) {
event.preventDefault();
$('#dictionary').load('h.html .entry');
});

var $loading = $('<div id="loading">Loading...</div>')
.insertBefore('#dictionary');

$(document).ajaxStart(function() {
$loading.show();
}).ajaxStop(function() {
$loading.hide();
});

$('body').on('click', 'h3.term', function() {
$(this).siblings('.definition').slideToggle();
});
});

注：以上答案仅供参考，并非完美答案，所有解答都以所在章节所学内容为主并不使用后期章节的方法，如果有更好的答案欢迎以回复形式一起分享。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 第四版练习答案基础教程通过Ajax发送数据

相关文章推荐

新的分享

章节导航