用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();//读取子节点的值
});

几个JQuery解析XML的程序例子的更多相关文章

  1. JQuery解析XML数据的几个例子

    用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script ty ...

  2. 160928、JQuery解析XML数据的demo

    用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 方案1 当后台返回的数据类型是xml对象 ...

  3. 使用jQuery解析xml时command节点解析失败

    jQuery版本1.8.3 待解析的xml为: <message><user><command>Login</command></message& ...

  4. 160708、JQuery解析XML数据的demo

    用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 方案1 当后台返回的数据类型是xml对象 ...

  5. JQuery -- Jquery 中的Ajax, Jquery解析xml文件

    1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript ...

  6. 使用Jquery解析xml的两种方法

    第一种方案(最稳妥): 先将String格式的xml转换为xml对象,然后再用Jquery解析xml对象 var returnDataXml = parseXML(returnData); var p ...

  7. jquery解析XML(1)

    jquery解析XML文件 html代码 <!DOCTYPE html><html><head><title>解析XML</title>&l ...

  8. JQuery 解析xml

    JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml.     JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来 ...

  9. 一个java解析xml的简单例子

    java解析xml,主要是通过Dom4j实现的,很多场合都会用到此功能,需要解析XML文件. 下面是一个简单的解析XML文件的例子: import java.util.Iterator; import ...

随机推荐

  1. 【Hive二】 Hive基本使用

    Hive基本使用 创建数据库 创建一个数据库,数据库在HDFS上的默认存储路径是/user/hive/warehouse/*.db create database 库名; 避免要创建的数据库已经存在错 ...

  2. keil5 mdk调用外部编辑器notepad++、sublime3、VSCode总结

    1.打开keil主界面,点击菜单栏Tools菜单,选择如下图所示的选项. 2.点击如下图所示的菜单上红笔标注的地方,给这个工具命名,如notepad++.sublime3.vscode等,如下图, 并 ...

  3. 通过SVI实现VLAN间通信

    两个不同网段的计算机与三层交换机直连,通过SVI实现VLAN间通信vlan 1 //几个不同网段就创建几个VLANvlan 2 int f0/1 //划分VLANswitchport mode acc ...

  4. 利用nodejs实现商品管理系统(二)

    下面实现商品管理系统 第一步:对应的ejs与数据交换的编写格式. 商品列表界面product.ejs <% for(var i=0;i<list.length;i++){%> < ...

  5. hive报错:Caused by: ERROR XBM0H: Directory /var/lib/hive/metastore/metastore_db cannot be created.

    在cdh集群中,删除之前的hive服务,然后将hive添加到其他节点,然后再通过hive客户端连接hive报错: Caused by: ERROR XJ041: Failed to create da ...

  6. python os模块atime ,ctime,mtime意义

    ython的os.stat中主要的时间信息有三个:st_mtime,st_atime,st_ctime.   1.st_mtime:time of last modification      最后一 ...

  7. Bootstrap开发漂亮的前端界面之实现原理

    引:Bootstrap采用的是一个“响应式”设计.响应式Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法.例如,您先在计算机显示器上浏览一个网站,然后再智能手机上浏览,智能手 ...

  8. swagger webapi控制器注释不显示

    swagger是webapi文档描述及调试工具,要在asp.net mvc中使用swagger,需要安装Swashbuckle.Core这个包,安装好后会在app_start中生成SwaggerCon ...

  9. 用gradle编译任意结构的Android项目

    ## 需求 * 继续用`Eclipse`项目的结构,但是使用`gradle`编译,或者说任意的项目结构进行编译. ## 解决方案 1. Android studio的项目结构 1. Android S ...

  10. 在Kotlin上怎样用Mockito2 mock final 类(KAD 23)

    作者:Antonio Leiva 时间:Mar 2, 2017 原文链接:https://antonioleiva.com/mockito-2-kotlin/ 如我们在前面文章中谈到的,Kotlin最 ...