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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
使用ES6语法重构React代码详解
May 09 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
原生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
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
Python内建模块struct实例详解
2018/02/02 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
关于VPN
2012/06/10 面试题
建筑项目策划书
2014/01/13 职场文书
保险经纪人求职信
2014/03/11 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
三严三实对照检查材料
2014/09/22 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书