jquery随记----ajax之取xml文件中的值

最新推荐文章于 2019-01-08 12:14:27 发布

bzuld

最新推荐文章于 2019-01-08 12:14:27 发布

阅读量1k

点赞数

分类专栏： jquery---随记文章标签： xml jquery html class function div

本文链接：https://blog.csdn.net/bzuld/article/details/6778372

版权

jquery---随记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

***************************************************************************************************************************

通过$.ajax()函数来得到xml文件，记住这里别用$.get()函数，用$.get()时在用$(data).find('entry').each(function(){ })得不到值

***************************************************************************************************************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//点击A时
$('#letter-a a').click(function(){
$('#dictionary').load('a.html');
//alert("load……");
return false;
});
//点击B时，得到json文件，这里用的是$.getJSON()方法
$('#letter-b a').click(function(){
  $.getJSON('b.json',function(data){
   $('#dictionary').empty();
   $.each(data,function(entryIndex,entry){
    var 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').append(html);
    })
   })
   return false;
  });

//点击C时，得到js文件，这里用的是$.getScript()方法
$('#letter-c a').click(function(){
  $('#dictionary').empty();
  $.getScript('c.js');
  return false;
  });

//点击D时,得到xml文件,这里用的是$.ajax() 方法
$('#letter-d a').click(function(){
  $.ajax({
   type: "GET",
            url: "d.xml",
            dataType: "xml",
   success:function(data){
   $('#dictionary').empty();
   $(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">'
       +$(this).text()+'</div>';
      });
      if($quote.find('author')){
       html+='<div class="quote-author">'+$quote.attr('author')+'</div>'

       }
     }
     html+='</div>'
     html+='</div>'
     $('#dictionary').append(html);
    });

   }
   });
  });
});
</script>
</head>
<body>
    <div class="letters" style="float:left;">
    <div class="letter" id="letter-a">
        <h3><a href="#">A</a></h3>
        </div>
        <div class="letter" id="letter-b">
        <h3><a href="#">B</a></h3>
        </div>
        <div class="letter" id="letter-c">
        <h3><a href="#">C</a></h3>
        </div>
        <div class="letter" id="letter-d">
        <h3><a href="#">D</a></h3>
        </div>
    </div>
    <div id="dictionary" style="float:right;" style=" width:500px;">
    </div>
</body>
</html>

***************************************************************************************************************************

一下是d.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,Affectionl,Self-denial,Faith,Hope,
   Charity and many other goodly sons and daughters.
  </definition>
  <quote author="Mumfrey Mappel">
   <line>All hail,Delusion Were it not for thee</line>
   <line>The world turned topsy-turvy we should see;</line>
   <line>For Vice,respectable with cleanly fancies,</line>
   <line>Would fly abandoned Virtue's gross advances.</line>
  </quote>
</entry>
<entry term="DIE" part="n.">
  <definition>
   The singular of "dice." We seldom hear the word.
   because there is a prohibitory proverb,"Never say
   die." At long intervals,however,some one says:"The
   die is cast," which is not true,for it is cut. The
   word is found in an immortal couplet by that eminent
   poet and domestic economist,Senator Depew:
  </definition>
  <quote>
   <line>A cube of cheese on larger than a die.</line>
   <line>May bait the trap to catch a nibbling mie.</line>
  </quote>
</entry>
</entries>

bzuld

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
jquery随记----ajax之取xml文件中的值

***************************************************************************************************************************通过$.ajax()函数来得到
复制链接

扫一扫