jQuery xml字符串的解析、读取及查找方法


Posted in Javascript onMarch 01, 2016

本文实例讲述了jQuery xml字符串的解析、读取及查找方法。分享给大家供大家参考,具体如下:

xml字符串的解析

<!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="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";
    });
    alert(result);
  });
</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="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:

<?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程序设计有所帮助。

Javascript 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
javascript实现获取字符串hash值
May 10 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
原生javascript实现解析XML文档与字符串
Mar 01 #Javascript
JS创建对象几种不同方法详解
Mar 01 #Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 #Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 #Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 #Javascript
ClearTimeout消除闪动实例代码
Feb 29 #Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 #Javascript
You might like
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
PyQt5每天必学之组合框
2018/04/20 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
公司综合部的成员自我评价分享
2013/11/05 职场文书
大型会议策划方案
2014/05/17 职场文书
生物工程专业求职信
2014/09/03 职场文书
委托书的写法
2014/09/16 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
《将心比心》教学反思
2016/02/23 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript