用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子。
第一种方案:
<script type="text/javascript"> $(document).ready(function() { $.ajax({ url: 'http://www.nowamagic.net/cgi/test.xml', dataType: 'xml', success: function(data){ //console.log(data); $(data).find("channel").find("item").each(function(index, ele) { var titles = $(ele).find("title").text(); var links = $(ele).find("link").text(); console.log(titles+'-----'); $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>'); }); } }); }) </script> <div id="noticecon"> <ol> </ol> </div>
第二种方案:
<script type="text/javascript"> $.get("http://www.nowamagic.net/cgi/test.xml", function(data){ $(data).find('channel').find('item').each(function(index, ele){ var titles = $(ele).find('title').text(); var links = $(ele).find('link').text(); $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>'); }) }); </script> <div id="noticecon"> <ol> </ol> </div>
一般步骤如下:
1. 读取xml文件
$.get("xmlfile.xml",function(xml){ //xml即为可以读取使用的内容,具体读取见第2点 });
2. 读取xml内容
如果读取的xml是来于xml文件,这结合上面的那点,处理如下:
$.get("xmlfile.xml",function(xml){ $(xml).find("item").length; });
如果读取的是xml字符串,则要注意一点,xml字符串的必然被"<xml>"和"</xml>"包围才可以被解析
$("<xml><root><item></item></root></xml>").find("item").length;
解析xml内容:
示例xml:
<?xml version="1.0" encoding="utf-8" ?> <fields> <field Name="Name1"> <fieldname>dsname</fieldname> <datatype>字符</datatype> </field> <field Name="Name2"> <fieldname>dstype</fieldname> <datatype>字符</datatype> </field> </fields>
以下是解析示例代码:
$(xml).find("field").each(function() { var field = $(this); var fName = field.attr("Name");//读取节点属性 var dataType = field.find("datatype").text();//读取子节点的值 });
-------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var xml = '<markers>';
xml += '<marker carId="1" carName="SHANGHAI" gpsTime="2011-08-26 21:21:11.0" lat="31.230393" lng="121.473704" direction="222" speed="22" />';
xml += '<marker carId="7" carName="XIAMEN" gpsTime="2011-08-26 21:21:11.0" lat="24.479836" lng="118.089421" direction="222" speed="22" />';
xml += '</markers>';
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var xml = '<markers>';
xml += '<marker carId="1" carName="SHANGHAI" gpsTime="2011-08-26 21:21:11.0" lat="31.230393" lng="121.473704" direction="222" speed="22" />';
xml += '<marker carId="7" carName="XIAMEN" gpsTime="2011-08-26 21:21:11.0" lat="24.479836" lng="118.089421" direction="222" speed="22" />';
xml += '</markers>';
var xmlDoc = $.parseXML(xml);
var result="";
$(xmlDoc).find("markers marker").each(function () {
result += "carId = " + $(this).attr("carId")
+ " ;carName =" + $(this).attr("carName")
+ " ;gpsTime =" + $(this).attr("gpsTime") + "\n";
});
var result="";
$(xmlDoc).find("markers marker").each(function () {
result += "carId = " + $(this).attr("carId")
+ " ;carName =" + $(this).attr("carName")
+ " ;gpsTime =" + $(this).attr("gpsTime") + "\n";
});
alert(result);
});
</script>
</head>
<body>
</body>
</html>
});
</script>
</head>
<body>
</body>
</html>
-----------------------请求
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function search() {
var searchStrLow = $("#txtTitle").val().toLowerCase();
$.post("1.xml", function(data) {
var html = "";
$(data).find('book').each(function() {
var titleLow = $(this).find("title").text().toLowerCase();
if (titleLow.indexOf(searchStrLow)!=-1) {
html += "<tr><td>" + $(this).find("title").text() + "</td>";
html += "<td>" + $(this).find("author").text() + "</td>";
html += "<td>" + $(this).find("year").text() + "</td></tr>";
$("#tbody1").html(html);
}
});
});
}
</script>
</head>
<body>
<span>输入标题:</span><input id="txtTitle" type="text" />
<input id="Button1" type="button" value="搜索" onclick="search()" />
<table style="width: 100%;">
<thead><tr><td>Title</td><td>Author</td><td>Year</td></tr></thead>
<tbody id="tbody1">
</tbody>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function search() {
var searchStrLow = $("#txtTitle").val().toLowerCase();
$.post("1.xml", function(data) {
var html = "";
$(data).find('book').each(function() {
var titleLow = $(this).find("title").text().toLowerCase();
if (titleLow.indexOf(searchStrLow)!=-1) {
html += "<tr><td>" + $(this).find("title").text() + "</td>";
html += "<td>" + $(this).find("author").text() + "</td>";
html += "<td>" + $(this).find("year").text() + "</td></tr>";
$("#tbody1").html(html);
}
});
});
}
</script>
</head>
<body>
<span>输入标题:</span><input id="txtTitle" type="text" />
<input id="Button1" type="button" value="搜索" onclick="search()" />
<table style="width: 100%;">
<thead><tr><td>Title</td><td>Author</td><td>Year</td></tr></thead>
<tbody id="tbody1">
</tbody>
</table>
</body>
</html>
<?xml version="1.0" encoding="utf-8" ?>
<bookstore>
<book id="No1">
<title>An Introduction to XML</title>
<author>Chunbin</author>
<year>2010</year>
<price>98.0</price>
</book>
<book id="No2">
<title>The Performance of DataBase</title>
<author>John</author>
<year>1996</year>
<price>56.0</price>
</book>
</bookstore>
相关推荐
下面我们来总结几个使用JQuery解析XML的例子。 第一种方案: [removed] $(document).ready(function() { $.ajax({ url: '//www.jb51.net/cgi/test.xml', dataType: 'xml', success: function(data){ ...
下面我们来总结几个使用JQuery解析XML的例子。 第一种方案: [removed] $(document).ready(function() { $.ajax({ url: 'http://localhost/cgi/test.xml', dataType: 'xml', success: function(data){
用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子
jquery实现ajax小例子(资源分高了点,但...提供了很多个常见的Ajax特效,学习这几个特效能助您学习jquery 项目中已有相关的包及工具,导入MyEclipse后可直接使用 jquery-1.7.js; JSON解析工具:fastjson-1.1.8.jar
两个例子,无状态SessionBean可会话Bean必须实现SessionBean,获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,计算利息等;在有状态SessionBean中,用累加器,以对话状态存储起来,创建EJB对象,并将...
两个例子,无状态SessionBean可会话Bean必须实现SessionBean,获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,计算利息等;在有状态SessionBean中,用累加器,以对话状态存储起来,创建EJB对象,并将...
弃用了struts,用spring mvc框架做了几个项目,感觉都不错,而且使用了注解方式,可以省掉一大堆配置文件。本文主要介绍使用注解方式配置的spring mvc,之前写的spring3.0 mvc和rest小例子没有介绍到数据层的内容,...