JQuery通过Ajax发送数据
JQuery的基础教程
第六章：通过Ajax发送请求
操作案例：通过点击不同的按钮，触发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 style="width: 1000px; margin: 0 auto;">
<script>
</script>
<h1 style="margin: 0 auto;">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>
开始的效果
1.通过点击A,获取HTML页面的代码,
$('#dictionary').hide().load('a.html',function(){
$(this).fadeIn('slow');
});
对应的js代码
//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"); }); //.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(); })
对应的a.html代码
<div class="entry">
<h3 class="term">
ABDICATION
</h3>
<div class="part">n.</div>
<div class="definition">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis impedit
</div>
<div class="quote">
<div class="quote-line">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eos,
</div> <div class="quote-line">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eos,
</div> <div class="quote-line">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eos,
</div> <div class="quote-line">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eos,
</div> <div class="quote-line">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eos,
</div>
<div class="quote-line">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eos,
</div>
<div class="quote-author">G.J.</div>
</div>
</div>
<div class="entry">
<h3 class="term">ABSOLUTE</h3>
<div class="part">adj.</div>
<div class="definition">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Ducimus incidunt soluta at laborum nam optio accusantium
dignissimos consequatur perferendis mollitia est necessi
tatibus ullam, dolorem provident recusandae delectus quis
inventore enim.
Quos consequuntur error facere dolores voluptas eum adipisci
quod asperiores rerum nam, enim nisi quae. Ipsa quisquam deleniti
perspiciatis nulla sed. Ratione numquam officia ipsam, debitis
beatae deleniti illo neque.
Mollitia necessitatibus corporis fugit voluptatibus earum.
Voluptas quod modi aperiam, eum voluptate aliquam possimus
. Architecto voluptatem sed sunt rem quae perferendis sapiente
tempora, mollitia, enim debitis aspernatur rerum, asperiores nobis!
</div>
</div>
获取html页面对应的效果
2.通过点击B,获取JSON格式数据 $.getJSON('b.json',function(){});
对应jS代码
//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); }); });
对应的json代码：b.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..." } ]
对应的效果
3. 获取js文件 $.getScript('c.js');
对应的js代码
//加载.js文件 $('#letter-c a').click(function(){ event.preventDefault(); $.getScript('c.js'); });
对应的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);
对应的效果
4. 加载xml文档 $.get('d.xml',function(){})
对应的js代码
$('#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));
});
});
});
对应的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>
对应的效果
浙公网安备 33010602011771号