开发的过程中有时候我们需要把xml文件当做数据库使用,比如留言本,这个时候我们就要对xml进行操作,加载xml文件到页面中,下面就来说说如何通过jquery+ajax实现无刷新的加载xml文件
xml文件(mes.xml)
View Code
<?
xml version="1.0" encoding="utf-8"
?>
< Messages >
< people >
< ENName >lishuaibin </ ENName >
< CNName >李帅斌 </ CNName >
< message >我叫李帅斌 </ message >
</ people >
< people >
< ENName >zhangxianbo </ ENName >
< CNName >张三 </ CNName >
< message >我叫张三 </ message >
</ people >
< people >
< ENName >linsi </ ENName >
< CNName >林四 </ CNName >
< message >我叫林四 </ message >
</ people >
< people >
< ENName >jiangwu </ ENName >
< CNName >姜五 </ CNName >
< message >我叫姜五 </ message >
</ people >
< people >
< ENName >liuliu </ ENName >
< CNName >刘六 </ CNName >
< message >我叫刘六 </ message >
</ people >
</ Messages >
< Messages >
< people >
< ENName >lishuaibin </ ENName >
< CNName >李帅斌 </ CNName >
< message >我叫李帅斌 </ message >
</ people >
< people >
< ENName >zhangxianbo </ ENName >
< CNName >张三 </ CNName >
< message >我叫张三 </ message >
</ people >
< people >
< ENName >linsi </ ENName >
< CNName >林四 </ CNName >
< message >我叫林四 </ message >
</ people >
< people >
< ENName >jiangwu </ ENName >
< CNName >姜五 </ CNName >
< message >我叫姜五 </ message >
</ people >
< people >
< ENName >liuliu </ ENName >
< CNName >刘六 </ CNName >
< message >我叫刘六 </ message >
</ people >
</ Messages >
在页面中ajax加载的代码
View Code
<script type="text/javascript">
$( function () {
$("#btnXml").click( function () {
$.ajax({
url: "mes.xml",
type: "POST",
dataType: "xml",
success: function (xml) {
$(xml).find("Messages>people").each( function () {
var ENName = $( this).find("ENName").text();
var CNName = $( this).find("CNName").text();
var message = $( this).find("message").text();
$("#loadXml").append(ENName+CNName+message+"<br>");
})
}
})
})
})
</script>
$( function () {
$("#btnXml").click( function () {
$.ajax({
url: "mes.xml",
type: "POST",
dataType: "xml",
success: function (xml) {
$(xml).find("Messages>people").each( function () {
var ENName = $( this).find("ENName").text();
var CNName = $( this).find("CNName").text();
var message = $( this).find("message").text();
$("#loadXml").append(ENName+CNName+message+"<br>");
})
}
})
})
})
</script>
其中url执行xml文件,DataType为xml,append实现接着填充...