jquery解析xml字符串示例分享


Posted in Javascript onMarch 25, 2014

第一种方案:

<script type="text/javascript">
$(document).ready(function() {
 $.ajax({
    url: 'http://www.test.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.test.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).find("item").length;    
});

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();//读取子节点的值
});
Javascript 相关文章推荐
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
vue数组对象排序的实现代码
Jun 20 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 #Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 #Javascript
Jquery插件编写简明教程
Mar 25 #Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 #Javascript
jquery默认校验规则整理
Mar 24 #Javascript
Javascript连接多个数组不用concat来解决
Mar 24 #Javascript
jqeury-easyui-layout问题解决方法
Mar 24 #Javascript
You might like
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
python 画函数曲线示例
2019/12/04 Python
django迁移文件migrations的实现
2020/03/31 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
会计岗位职责范本
2014/03/07 职场文书
小小商店教学反思
2014/04/27 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
医院财务人员岗位职责
2015/04/14 职场文书