jQuery读取XML文件内容的方法

  本文实例讲述了jQuery读取XML文件内容的方法。分享给大家供大家参考。具体实现方法如下:

  

复制代码 代码如下:
<!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>

  <title>jQuery读取XML文件</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <style type="text/css">

  h1{color:Green;text-align:center;}

  body{ background-color:#EEEEEE ; font-family:微软雅黑; }

  #showresult{width:600px;overflow:hidden;}

  </style>

  <script type="text/javascript" src="jquery/1.4.4/jquery.min.js"></script>

  <script type="text/javascript">

  $(document).ready(function () {

  $("#read").click(function () {

  $.ajax({

  //请求方式为get

  type: "GET",

  //xml文件位置

  url: "sitemap.xml",

  //返回数据格式为xml

  dataType: "xml",

  //请求成功完成后要执行的方法

  success: function (xml) {

  $(xml).find("url").each(function (i) {

  //i从0开始,累加,如果要显示所有数据,将判断去除即可

  if (i < 10) {

  //链接地址

  var location = $(this).find("loc").text();

  //显示文字

  var text = $(this).find("loc").text();

  //动态加载方法:链接地址

  $("<a>").attr("href", location)

  //显示文字

  .text(text)

  //设置样式

  .css({ "width": "700px", "float": "left", "margin-bottom": "5px" })

  //加载到div

  .appendTo("#showresult");

  }

  })

  }

  });

  return false;

  });

  });

  </script>

  </head>

  <body>

  <div id="showresult">

  <h1>jQuery读取XML文件</h1>

  <a id="read" href="#" style="width:700px;">点击读取XML</a>

  </div>

  </body>

  </html>

  希望本文所述对大家的jQuery程序设计有所帮助。