用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子。
第一种方案:
01 |
<script type= "text/javascript" >
|
02 |
$(document).ready( function () {
|
06 |
success: function (data){
|
08 |
$(data).find( "channel" ).find( "item" ).each( function (index, ele) {
|
09 |
var titles = $(ele).find( "title" ).text();
|
10 |
var links = $(ele).find( "link" ).text();
|
11 |
console.log(titles+ '-----' );
|
12 |
$( "#noticecon" ).find( 'ol' ).append( '<li><a href="' +links+ '">' +titles+ '</a></li>' );
|
第二种方案:
01 |
<script type= "text/javascript" >
|
03 |
$(data).find( 'channel' ).find( 'item' ).each( function (index, ele){
|
04 |
var titles = $(ele).find( 'title' ).text();
|
05 |
var links = $(ele).find( 'link' ).text();
|
06 |
$( "#noticecon" ).find( 'ol' ).append( '<li><a href="' +links+ '">' +titles+ '</a></li>' );
|
一般步骤如下:
1. 读取xml文件
1 |
$.get( "xmlfile.xml" , function (xml){
|
2. 读取xml内容
如果读取的xml是来于xml文件,这结合上面的那点,处理如下:
1 |
$.get( "xmlfile.xml" , function (xml){
|
2 |
$(xml).find( "item" ).length;
|
如果读取的是xml字符串,则要注意一点,xml字符串的必然被"<xml>"和"</xml>"包围才可以被解析
1 |
$( "<xml><root><item></item></root></xml>" ).find( "item" ).length;
|
解析xml内容:
示例xml:
01 |
<?xml version= "1.0" encoding= "utf-8" ?>
|
04 |
<fieldname>dsname</fieldname>
|
05 |
<datatype>字符</datatype>
|
08 |
<fieldname>dstype</fieldname>
|
09 |
<datatype>字符</datatype>
|
以下是解析示例代码:
1 |
$(xml).find( "field" ).each( function () {
|
3 |
var fName = field.attr( "Name" );
|
4 |
var dataType = field.find( "datatype" ).text();
|
<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){
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>
<?
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
>
分享到:
相关推荐
关于jq读取xml的,有需要的朋友可以下载。
jQuery解析xml文件,实现省市县三级联动下拉框
jquery解析xml
JQuery 省市县三级联动 ,解析中国城市XML,实现联动。需在本地有服务
jquery解析xml并实现省市二级联动
Jquery操作xml_Demo。 帮一个朋友做的一个Demo实例,用jquery读取xml文件,很简单的操作,一看就明白。
主要介绍了使用jquery解析XML的方法,代码简洁实用,需要的朋友可以参考下
本文实例总结了JQuery解析XML的方法。分享给大家供大家参考,具体如下: 用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子。 第一种方案...
下面小编就为大家带来一篇JQuery解析XML数据的几个简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jQuery加载并解析XML
对于HTML的解析,我是使用jQuery非常方便,其实,我们也可以用jquery解析XML,也是同样的方便。 如果你用过Java、PHP等语言解析过XML,相信会跟我有相同的感觉,那就是很麻烦。改用jQuery来读取、分析、操作XML后,...
NULL 博文链接:https://a52071453.iteye.com/blog/1673903
NULL 博文链接:https://qyongkang.iteye.com/blog/585382
下面小编就为大家带来一篇jquery解析XML及获取XML节点名称的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
通过示例为大家介绍了使用jquery解析XML的方法,经测试比较实用,需要的朋友可以参考下