本文介绍了一个使用Ajax从XML文件中加载数据并将其显示在HTML页面上的示例。该示例利用jQuery简化了Ajax调用过程，并展示了如何解析XML文件中的数据及在网页上展示这些数据的方法。
ajax.xml：
|
1
2
3
4
5
6
7
8
9
10
11
|
<?
xml
version
=
"1.0"
encoding
=
"UTF-8"
?>
<
stulist
>
<
student
email
=
"1@1.com"
>
<
name
>zhangsan</
name
>
<
id
>1</
id
>
</
student
>
<
student
email
=
"2@2.com"
>
<
name
>lisi</
name
>
<
id
>2</
id
>
</
student
>
</
stulist
>
|
demo.html：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<title>加载XML</title>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<meta name=
"generator"
content=
"editplus"
/>
<script type=
"text/javascript"
src=
"js/jquery-1.10.1.min.js"
></script>
<script type=
"text/javascript"
>
$(
function
() {
$(
"button"
).click(
function
(){
$.ajax({
url:
'xml/ajax.xml'
,
type:
'GET'
,
dataType:
'xml'
,
timeout: 1000,
cache:
false
,
error:
function
(xml){
alert(
'加载XML文档出错'
);
},
success:
function
(xml){
//建立一个代码片段
var
frag=$(
"<ul/>"
);
//遍历所有student节点
$(xml).find(
"student"
).each(
function
(i){
//获取id节点
var
id=$(
this
).children(
"id"
),
//获取节点文本
id_value=id.text(),
//获取student下的email属性。
email=$(
this
).attr(
"email"
);
//构造HTML字符串，通过append方法添加进之前建立代码片段
frag.append(
"<li>"
+id_value+
"-"
+email+
"</li>"
);
});
//最后得到的frag添加进HTML文档中
frag.appendTo(
"#load"
);
}
});
});
});
</script>
</head>
<body>
<button>加载</button>
<div id=
"load"
></div>
</body>
</html>
|
效果图：
扫一扫
1444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
