使用jquery解析XML示例代码

前端技术 2023/09/06 JavaScript

xml文件结构:books.xml

<?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>

页面代码:

<!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>

效果图:

本文地址：https://www.stayed.cn/item/17446

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案