JQuery解析XML数据的几个例子

用JavaScript解析XML数据是常见的编程任务，JavaScript能做的，JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子。

第一种方案：

01 <code class="string">"text/javascript"</code><code class="plain">></code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>02</code></td> <td class="content"><code class="plain">$(document).ready(</code><code class="keyword">function</code><code class="plain">() {</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>03</code></td> <td class="content"><code class="spaces">    </code><code class="plain">$.ajax({</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>04</code></td> <td class="content"><code class="spaces">        </code><code class="plain">url: </code> <code class="string">'http://www.nowamagic.net/cgi/test.xml'</code><code class="plain">,</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>05</code></td> <td class="content"><code class="spaces">        </code><code class="plain">dataType: </code><code class="string">'xml'</code><code class="plain">,</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>06</code></td> <td class="content"><code class="spaces">        </code><code class="plain">success: </code><code class="keyword">function</code><code class="plain">(data){</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>07</code></td> <td class="content"><code class="spaces">            </code><code class="comments">//console.log(data);</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>08</code></td> <td class="content"><code class="spaces">            </code><code class="plain">$(data).find(</code><code class="string">"channel"</code><code class="plain">).find(</code><code class="string">"item"</code><code class="plain">).each(</code><code class="keyword">function</code><code class="plain">(index, ele) {</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>09</code></td> <td class="content"><code class="spaces">                </code><code class="keyword">var</code> <code class="plain">titles = $(ele).find(</code><code class="string">"title"</code><code class="plain">).text();</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>10</code></td> <td class="content"><code class="spaces">                </code><code class="keyword">var</code> <code class="plain">links = $(ele).find(</code><code class="string">"link"</code><code class="plain">).text();</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>11</code></td> <td class="content"><code class="spaces">                </code><code class="plain">console.log(titles+</code><code class="string">'-----'</code><code class="plain">);</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>12</code></td> <td class="content"><code class="spaces">                </code><code class="plain">$(</code><code class="string">"#noticecon"</code><code class="plain">).find(</code><code class="string">'ol'</code><code class="plain">).append(</code><code class="string">'<li><a href="'</code><code class="plain">+links+</code><code class="string">'">'</code><code class="plain">+titles+</code><code class="string">'</a></li>'</code><code class="plain">);</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>13</code></td> <td class="content"><code class="spaces">            </code><code class="plain">});</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>14</code></td> <td class="content"><code class="spaces">        </code><code class="plain">}</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>15</code></td> <td class="content"><code class="spaces">    </code><code class="plain">});</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>16</code></td> <td class="content"><code class="plain">}) </code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>17</code></td> <td class="content"><code class="plain">
18
19     "noticecon">
20
21
22

第二种方案：

01 <code class="string">"text/javascript"</code><code class="plain">></code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>02</code></td> <td class="content"><code class="spaces">    </code><code class="plain">$.get(</code><code class="string">"http://www.nowamagic.net/cgi/test.xml"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">(data){</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>03</code></td> <td class="content"><code class="spaces">        </code><code class="plain">$(data).find(</code><code class="string">'channel'</code><code class="plain">).find(</code><code class="string">'item'</code><code class="plain">).each(</code><code class="keyword">function</code><code class="plain">(index, ele){</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>04</code></td> <td class="content"><code class="spaces">            </code><code class="keyword">var</code> <code class="plain">titles = $(ele).find(</code><code class="string">'title'</code><code class="plain">).text();</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>05</code></td> <td class="content"><code class="spaces">            </code><code class="keyword">var</code> <code class="plain">links = $(ele).find(</code><code class="string">'link'</code><code class="plain">).text();</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>06</code></td> <td class="content"><code class="spaces">            </code><code class="plain">$(</code><code class="string">"#noticecon"</code><code class="plain">).find(</code><code class="string">'ol'</code><code class="plain">).append(</code><code class="string">'<li><a href="'</code><code class="plain">+links+</code><code class="string">'">'</code><code class="plain">+titles+</code><code class="string">'</a></li>'</code><code class="plain">);</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>07</code></td> <td class="content"><code class="spaces">        </code><code class="plain">})</code></td> </tr> </tbody> </table> </div> <div class="line alt2"> <table> <tbody> <tr> <td class="number"><code>08</code></td> <td class="content"><code class="spaces">    </code><code class="plain">});</code></td> </tr> </tbody> </table> </div> <div class="line alt1"> <table> <tbody> <tr> <td class="number"><code>09</code></td> <td class="content"><code class="plain">
10
11     "noticecon">
12
13
14

一般步骤如下：

1. 读取xml文件

1 $.get("xmlfile.xml",function(xml){
2     //xml即为可以读取使用的内容，具体读取见第2点
3 });

2. 读取xml内容

如果读取的xml是来于xml文件，这结合上面的那点，处理如下：

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

如果读取的是xml字符串，则要注意一点，xml字符串的必然被""和""包围才可以被解析

1 $("").find("item").length;

解析xml内容：

示例xml：

01 "1.0" encoding="utf-8" ?>
02
03   "Name1">
04     dsname
05     字符
06
07   "Name2">
08     dstype
09     字符
10
11

以下是解析示例代码：

view source print ?

1	$(xml).find("field").each(function() {

2	var field = $(this);

3	var fName = field.attr("Name");//读取节点属性

4	var dataType = field.find("datatype").text();//读取子节点的值

5

});