您的位置：首页 > Web前端 > JQuery

JQuery解析XML数据的几个例子

2017-11-26 14:57 399 查看
用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>
以下是解析示例代码：

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
});

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航