JQuery解析XML的方法小結

更新時間：2016年04月02日 11:27:29 作者：nowamagic

這篇文章主要介紹了JQuery解析XML的方法,總結分析了常用的jQuery解析xml文件的相關技巧,需要的朋友可以參考下

本文實例總結了JQuery解析XML的方法。分享給大家供大家參考，具體如下：

用JavaScript解析XML數據是常見的編程任務，JavaScript能做的，JQuery當然也能做。下面我們來總結幾個使用JQuery解析XML的例子。

第一種方案：

<script type="text/javascript">
$(document).ready(function() {
  $.ajax({
     url: 'http://localhost/cgi/test.xml',
     dataType: 'xml',
     success: function(data){
       //console.log(data);
       $(data).find("channel").find("item").each(function(index, ele) {
        var titles = $(ele).find("title").text();
        var links = $(ele).find("link").text();
        console.log(titles+'-----');
        $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');
      });
    }
  });
})
</script>
<div id="noticecon">
  <ol>
  </ol>
</div>

第二種方案：

<script type="text/javascript">
  $.get("http://localhost/cgi/test.xml", function(data){
    $(data).find('channel').find('item').each(function(index, ele){
      var titles = $(ele).find('title').text();
      var links = $(ele).find('link').text();
      $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');
    })
  });
</script>
<div id="noticecon">
  <ol>
  </ol>
</div>

一般步驟如下：

1. 讀取xml文件

$.get("xmlfile.xml",function(xml){
  //xml即為可以讀取使用的內容，具體讀取見第2點
});

2. 讀取xml內容

如果讀取的xml是來于xml文件，這結合上面的那點，處理如下：

$.get("xmlfile.xml",function(xml){ 
  $(xml).find("item").length; 
});

如果讀取的是xml字符串，則要注意一點，xml字符串的必然被"<xml>"和"</xml>"包圍才可以被解析

$("<xml><root><item></item></root></xml>").find("item").length;

解析xml內容：

示例xml：

<?xml version="1.0" encoding="utf-8" ?>
<fields>
 <field Name="Name1">
 <fieldname>dsname</fieldname>
 <datatype>字符</datatype>
 </field>
 <field Name="Name2">
 <fieldname>dstype</fieldname>
 <datatype>字符</datatype>
 </field>
</fields>

以下是解析示例代碼：

$(xml).find("field").each(function() {
  var field = $(this);
  var fName = field.attr("Name");//讀取節(jié)點屬性
  var dataType = field.find("datatype").text();//讀取子節(jié)點的值
});

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery操作xml技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

JQuery
XML

jQuery.Form實現Ajax上傳文件同時設置headers的方法
這篇文章主要介紹了jQuery.Form實現Ajax上傳文件同時設置headers的方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2017-06-06
基于jquery實現簡單輪播圖效果
這篇文章主要為大家詳細介紹了基于jquery實現簡單輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
JQuery 操作/獲取table具體代碼
table在使用中比較廣泛，下面與大家分享下JQuery操作/獲取table的基本方法，感興趣的朋友可以參考下哈
2013-06-06
jQuery中DOM操作實例分析
這篇文章主要介紹了jQuery中DOM操作方法,實例分析了dom對象的創(chuàng)建、屬性的修改、樣式的修改、動態(tài)綁定事件等技巧,需要的朋友可以參考下
2015-01-01
jquery 刪除cookie失效的解決方法
本文是對jquery 刪除cookie失效的解決方法進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
jquery密碼強度校驗
這篇文章主要介紹了jquery密碼強度校驗，這是一個非常常見的功能，在輸入密碼的時候提示密碼的強度，本文使用jQuery來實現，有需要的小伙伴可以參考下。
2015-12-12
Jquery增加鼠標中間功能mousewheel的實例代碼
這篇文章介紹了Jquery增加鼠標中間功能mousewheel的實例代碼，有需要的朋友可以參考一下
2013-09-09
jQuery Ajax Post 回調函數不執(zhí)行問題的解決方法
本文是小編給大家?guī)淼膉Query Ajax Post 回調函數不執(zhí)行的原因及解決方法，在本文最下面還給大家附加jquery Ajax 不執(zhí)行回調函數success的原因，這兩個問題都非常多見，感興趣的朋友一起看下吧
2016-08-08
jquery實現時間選擇器
這篇文章主要為大家詳細介紹了jquery實現時間選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
jQuery 順便學習下CSS選擇器奇偶匹配nth-child(even)
今天學習jQuery,看到nth-child(even)用法，特意找了下這個選擇器的用法,在CSS3標準中，用法很強大。
2010-05-05