JQuery的基础教程
第六章：通过Ajax发送请求
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
//1.直接获取html文件
$('#letter-a a').click(function(event){
event.preventDefault();
//先隐藏目标元素，然后开始加载，
//当加载完成时，又通过回调函数以淡出的方式逐渐显示出新生的元素
$('#dictionary').hide().load('a.html',function(){
$(this).fadeIn('slow');
});
// $.ajax({
// url:"a.html"
// })
// alert("Loaded");
});
//2.获取json格式的文件，并对文件进行解析
$("#letter-b a").click(function(event){
event.preventDefault();
//json规定：所有的对象键以及所有的字符串值，都必须包含在双引号中
// $.getJSON()称为类方法，全局方法，
//第二个参数是当加载完成时调用的函数。
$.getJSON('b.json',function(data){
var html="";
//$.each()不操作jQuery对象，它以数组或对象作为第一个参数，
//以回调函数作为第二个参数，
//每次循环要将数组或对象的当前索引和当前索引项作为回调函数的两个参数
$.each(data,function(entryIndex,entry){
html += '<div class="entry">';
html += '<h3 class="term">'+entry.term+'</h3>';
html += '<div class="entry">'+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);
})
//$.get()和.load()等快捷的Ajax方法并没有提供错误的回调函数
//可以使用全局的.ajaxError()方法，还可以利用JQuery的延迟对象系统
.fail(function(jqXHR){
//status包含了服务器返回的状态码：
// 400: 请求语法错误
// 401： 为授权
// 403： 禁止访问
// 404： 未发现请求的URL
// 500: 服务器内部的错误
$("#dictionary").html('An error occurred:'+jqXHR.status).append(jqXHR.responseText);
})
;
});
//加载.js文件
$('#letter-c a').click(function(){
event.preventDefault();
$.getScript('c.js');
});
//加载XML文档
$('#letter-d a').click(function(){
event.preventDefault();
$.get('d.xml',function(data){
$('#dictionary').empty();
var html='<div class="entry">';
$(data).find("entry").each(function(){
var $entry=$(this);
var html='<div class="entry">';
html+='<h3 class="term">'+$entry.attr('term')+'</h3>';
html+='<div class="part">'+$entry.attr('part')+'</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));
});
});
});
//.ajaxStart()和.ajaxStop()事件
//加载反馈系统就位，a的.load（）和b的.getJSON()都可以导致反馈操作发生
var $loading=$('<div id="loading">Loading</div>').insertBefore('#dictionary');
$(document).ajaxStart(function(){
$loading.show();
}).ajaxStop(function(){
$loading.hide();
})
//看起来一切正常，但是在现有代码的基础上单击没有结果
//因为在单击时，词条还没有被添加到文档中，
//通过Ajax生成页面内容时常见的问题
$('h3.term').click(function(){
$(this).siblings('.definition').slideToggle();
});
//值得推荐的做法：事件委托
//.on()告诉浏览器密切关注页面上发生的任何单击事件。
//当被点击的元素与h3.term选择符匹配时，才会执行事件处理程序
$('body').on('click','h3.term',function(){
$(this).siblings('.definition').slideToggle();
})
})
</script>
<h1>The Devil's Dictionary</h1>
<span>by Ambrose Bierce</span>
<br>
<br>
<br>
<div class="letters" style="float: left;width:200px">
<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>
<div id="dictionary" style="float: left; width:800px">
</div>
</body>
</html>
json文件
[
{
"term":"BACCHUS",
"part":"n.",
"definition":"A convenient deity invented by the....",
"quote":[
"Is public worship,then,a sin,",
"That for devotions paid to Bacchus",
"The licitors dare to run us in,",
"And resolutely thump andwhach us?"
],
"author":"Jorace"
},
{
"term":"BEARD",
"part":"v.t.",
"definition":"To speak of a man as you find him when..."
},
{
"term":"BEARD",
"part":"n.",
"definition":"The hair that is commonly cut off by..."
}
]
xml文件
<?xml version="1.0" encoding='UTF-8'?>
<entries>
<entry term='DEFAME' part='v.t.'>
<definition>
To lie about another. To tell the truth about another
</definition>
</entry>
<entry term='DEFENCELESS' part='adj.'>
<definition>
Unable to attack
</definition>
</entry>
<entry term='DELUSION' part='n.'>
<definition>
The father of a most respectable family.
comprising Enthusiasm,Affection,Self-denial,Faith,Hope
,Charity and many other goodly sons and daughters
</definition>
<quote author="Munfrey Mappel">
<line>
All hail,Delusion! Were it not for three
</line>
<line>
The world turned topsy-turvy we should see;
</line>
<line>
For Vice, respectable with cleanly fancies
</line>
<line>
Would fiy abandoned Virtue's gross advances.
</line>
</quote>
</entry>
</entries>
js文件
var entries=[
{
"term":"CALAMITY",
"part":"n.",
"definition":"A more than commonly plain and...."
},
{
"term":"CANNIBAL",
"part":"n.",
"definition":"A gastronome of the old school who...."
}
,
{
"term":"CHILDHOOD",
"part":"n.",
"definition":"The period of human life intermediate...."
}
];
var html="";
$.each(entries,function(){
html+='<div class="entry">';
html+='<h3 class="term">'+this.term+'</h3>';
html+='<div class="part">'+this.part+'</div>';
html+='<div class="definition">'+this.definition+'</div>';
html+='</div>';
});
$('#dictionary').html(html);
