用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 |
}); |
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=UTF-8"
>
<title>jquery解析xml</title>
<script type=
"text/javascript"
src=
"js/jquery-1.4.2.min.js"
></script>
<script type=
"text/javascript"
>
$(
function
(){
$.post(
'books.xml'
,
function
(data){
//查找所有的book节点
var
s=
""
;
$(data).find(
'book'
).each(
function
(i){
var
id=$(
this
).attr(
'id'
);
var
name=$(
this
).children(
'name'
).text();
var
author=$(
this
).children(
'author'
).text();
var
price=$(
this
).children(
'price'
).text();
s+=id+
" "
+name+
" "
+author+
" "
+price+
"<br>"
;
});
$(
'#mydiv'
).html(s);
});
});
</script>
</head>
<body>
<div id=
'mydiv'
></div>
</body>
</html>
<?
xml
version
=
"1.0"
encoding
=
"UTF-8"
?>
<
root
>
<
book
id
=
"1"
>
<
name
>深入浅出extjs</
name
>
<
author
>张三</
author
>
<
price
>88</
price
>
</
book
>
<
book
id
=
"2"
>
<
name
>锋利的jQuery</
name
>
<
author
>李四</
author
>
<
price
>99</
price
>
</
book
>
<
book
id
=
"3"
>
<
name
>深入浅出flex</
name
>
<
author
>王五</
author
>
<
price
>108</
price
>
</
book
>
<
book
id
=
"4"
>
<
name
>java编程思想</
name
>
<
author
>钱七</
author
>
<
price
>128</
price
>
</
book
>
</
root
>