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 相关文章推荐
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
详解JavaScript中return的用法
May 08 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
基于Vue中的父子传值问题解决
Jul 27 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
smarty的保留变量问题
2008/10/23 PHP
利用php输出不同的心形图案
2016/04/22 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
提高网站信任度的技巧
2008/10/17 Javascript
extjs form textfield的隐藏方法
2008/12/29 Javascript
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
python实现按长宽比缩放图片
2018/06/07 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
生态学毕业生自荐信
2013/10/27 职场文书
美术师范毕业生自荐信
2013/11/16 职场文书
大学生标准推荐信范文
2013/11/25 职场文书
关于毕业的广播稿
2014/01/10 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书