jquery實現的讀取並解析xml檔案程式碼例項

admin發表於2017-04-01
jQueryXML

本章節分享一段簡單的例項程式碼，它實現了對xml檔案的讀取和解析功能。

有序的朋友可以參考一下，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>螞蟻部落</title>
<style type="text/css">
h1 {
  color:Green;
  text-align:center;
}
body{
  background-color:#EEEEEE;
  font-family:微軟雅黑;
}
#showresult{
  width:600px;
  overflow:hidden;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#read").click(function(){
    $.ajax({
      //請求方式為get
      type:"GET",
      //xml檔案位置
      url:"xml.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>

相關文章