提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

使用jquery解析XML示例代码

jQueryXML代码 使用 解析 示例
2023-06-13 09:15:45 时间

xml文件结构:books.xml

<?xmlversion="1.0"encoding="UTF-8"?>
<root>
<bookid="1">
<name>深入浅出extjs</name>
<author>张三</author>
<price>88</price>
</book>
<bookid="2">
<name>锋利的jQuery</name>
<author>李四</author>
<price>99</price>
</book>
<bookid="3">
<name>深入浅出flex</name>
<author>王五</author>
<price>108</price>
</book>
<bookid="4">
<name>java编程思想</name>
<author>钱七</author>
<price>128</price>
</book>
</root>

页面代码:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>jquery解析xml</title>
<scripttype="text/javascript"src="js/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript">
$(function(){
$.post("books.xml",function(data){
//查找所有的book节点
vars="";
$(data).find("book").each(function(i){
varid=$(this).attr("id");
varname=$(this).children("name").text();
varauthor=$(this).children("author").text();
varprice=$(this).children("price").text();
s+=id+"    "+name+"    "+author+"    "+price+"<br>";
});
$("#mydiv").html(s);
});
});
</script>
</head>
<body>
<divid="mydiv"></div>
</body>
</html>

效果图:

相关文章