JQuery解析XML数据的几个例子
原文http://www.nowamagic.net/jquery/jquery_ParsingXmlData.php
用JavaScript解析XML数据是常见的编程任务，JavaScript能做的，JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子。
第一种方案：
01 |
<script
type="text/javascript"> |
02 |
$(document).ready(function()
{ |
03 |
$.ajax({ |
04 |
url: 'http://www.nowamagic.net/cgi/test.xml', |
05 |
dataType: 'xml', |
06 |
success: function(data){ |
07 |
//console.log(data); |
08 |
$(data).find("channel").find("item").each(function(index,
ele) { |
09 |
var titles
= $(ele).find("title").text(); |
10 |
var links
= $(ele).find("link").text(); |
11 |
console.log(titles+'-----'); |
12 |
$("#noticecon").find('ol').append('<li><a
href="'+links+'">'+titles+'</a></li>'); |
13 |
}); |
14 |
} |
15 |
}); |
16 |
}) |
17 |
</script> |
18 |
19 |
<div
id="noticecon"> |
20 |
<ol> |
21 |
</ol> |
22 |
</div> |
第二种方案：
01 |
<script
type="text/javascript"> |
02 |
$.get("http://www.nowamagic.net/cgi/test.xml", function(data){ |
03 |
$(data).find('channel').find('item').each(function(index,
ele){ |
04 |
var titles
= $(ele).find('title').text(); |
05 |
var links
= $(ele).find('link').text(); |
06 |
$("#noticecon").find('ol').append('<li><a
href="'+links+'">'+titles+'</a></li>'); |
07 |
}) |
08 |
}); |
09 |
</script> |
10 |
11 |
<div
id="noticecon"> |
12 |
<ol> |
13 |
</ol> |
14 |
</div> |
一般步骤如下：
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字符串的必然被"<xml>"和"</xml>"包围才可以被解析
1 |
$("<xml><root><item></item></root></xml>").find("item").length; |
解析xml内容：
示例xml：
01 |
<?xml
version="1.0" encoding="utf-8" ?> |
02 |
<fields> |
03 |
<field
Name="Name1"> |
04 |
<fieldname>dsname</fieldname> |
05 |
<datatype>字符</datatype> |
06 |
</field> |
07 |
<field
Name="Name2"> |
08 |
<fieldname>dstype</fieldname> |
09 |
<datatype>字符</datatype> |
10 |
</field> |
11 |
</fields> |
以下是解析示例代码：
1 |
$(xml).find("field").each(function()
{ |
2 |
var field
= $(this); |
3 |
var fName
= field.attr("Name");//读取节点属性 |
4 |
var dataType
= field.find("datatype").text();//读取子节点的值 |
5 |
}); |
