JQuery解析HTML、JSON和XML实例详解
1、HTML
有的时候会将一段HTML片段保存在HTML文件中,在另外的主页面直接读取该HTML文件,然后解析里面的HTML代码片段融入到主页面中。
fragment.html文件,其内容:
复制代码 代码如下: <div>hello Jquery</div>
在主页面 Test.html中解析代码
复制代码 代码如下: $("#a1").click(function(){ $("#div2").load('fragment.html'); return false; });[code]
2、JSON JSON文件是test.json,其内容: [code] [{"name":"jim","age":"20"},{"name":"lily","age":"18","hobby":["swim","movie"]}]
在主页面 Test.html中解析代码
复制代码 代码如下: $("#a2").click(function(){ $.getJSON('test.json',function(data){ var html = '<table>'; $.each(data,function(entryIndex,entry){ html += '<tr><td>'+entry.name+'</td><td>'+entry.age+'</td>'; if(entry.hobby){ html += '<td>'; $.each(entry.hobby, function(lineindex,line) { html += line+","; }); html += '</td>'; }
html += '</tr>'; }); html += '</table>'; $("#div2").html(html); return false; }); });
3、XML XML文件是test.xml,其内容是: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8" ?> <root> <book id="1"> <name>深入浅出extjs</name> <author>张三</author> <price>88</price> </book> <book id="2"> <name>锋利的jQuery</name> <author>李四</author> <price>99</price> </book> <book id="3"> <name>深入浅出flex</name> <author>王五</author> <price>108</price> </book> <book id="4"> <name>java编程思想</name> <author>钱七</author> <price>128</price> </book> </root>
在主页面 Test.html中解析代码 复制代码 代码如下: $("#a3").click(function(){ $.get('test.xml',function(data){ var s=""; $(data).find('book').each(function(i){ var id=$(this).attr('id'); var name=$(this).children('name').text(); var author=$(this).children('author').text(); var price=$(this).children('price').text(); s+=id+" "+name+" "+author+" "+price+"<br>"; }); $('#div2').html(s); }); });
对JQuery解析不同文档做了一个Demo,Test.html的原码是 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
$(function(){ $("#a1").click(function(){ $("#div2").load('fragment.html'); return false; });
$("#a2").click(function(){ $.getJSON('test.json',function(data){ var html = '<table>'; $.each(data,function(entryIndex,entry){ html += '<tr><td>'+entry.name+'</td><td>'+entry.age+'</td>'; if(entry.hobby){ html += '<td>'; $.each(entry.hobby, function(lineindex,line) { html += line+","; }); html += '</td>'; }
html += '</tr>'; }); html += '</table>'; $("#div2").html(html); return false; }); });$("#a3").click(function(){ $.get('test.xml',function(data){ var s=""; $(data).find('book').each(function(i){ var id=$(this).attr('id'); var name=$(this).children('name').text(); var author=$(this).children('author').text(); var price=$(this).children('price').text(); s+=id+" "+name+" "+author+" "+price+"<br>"; }); $('#div2').html(s); }); }); });
</script> </head> <body> <form id="form1" runat="server"> <ul id="div1"> <li><a id="a1" href="#">show html fragment</a></li> <li><a id="a2" href="#">show json</a></li> <li><a id="a3" href="#">show xml</a></li> </ul> <p>Show Content:</p> <div id ="div2"></div> </form> <div>
</div> </body> </html>
利用FireFox浏览器打开该Test.html文件,效果如下
点第一个超链接会在Show Content区域显示新插入的html片段
点第二个超链接,会显示json数据:
点第三个超链接,会显示xml数据:
详细出处参考:http://www.jb51.net/article/48549.htm
JQuery解析HTML、JSON和XML实例详解的更多相关文章
- C# XML与Json之间相互转换实例详解
对于这转换其实很简单,其中最重要的就是先要引用类库.可以到官网进行下载引用http://json.codeplex.com. XML转换为Json字符串 string xml = @"< ...
- JavaScript解析机制与闭包原理实例详解
js代码解析机制: js代码解析之前会创建一个如下的词法环境对象(仓库):LexicalEnvironment{ } 在扫描js代码时会把: 1.用声明的方式创建的函数的名字; 2.用var定义的变量 ...
- jquery插件图片延时加载实例详解
效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...
- Java eclipse下 Ant build.xml实例详解
在有eclipse集成环境下ant其实不是很重要,但有些项目需要用到,另外通过eclipse来学习和理解ant是个很好的途径,所以写他demo总结下要点,希望能够帮到大家. 一.本人测试环境eclip ...
- 转:Java eclipse下 Ant build.xml实例详解
在有eclipse集成环境下ant其实不是很重要,但有些项目需要用到,另外通过eclipse来学习和理解ant是个很好的途径,所以写他demo总结下要点,希望能够帮到大家. 一.本人测试环境eclip ...
- Java eclipse下 Ant build.xml实例详解 附完整项目源码
在有eclipse集成环境下ant其实不是很重要,但有些项目需要用到,另外通过eclipse来学习和理解ant是个很好的途径,所以写他demo总结下要点,希望能够帮到大家. 一.本人测试环境eclip ...
- Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解
Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解 一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ v ...
- Java中JSON字符串与java对象的互换实例详解
这篇文章主要介绍了在java中,JSON字符串与java对象的相互转换实例详解,非常不错,具有参考借鉴价值,需要的朋友可以参考下 在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JS ...
- Java中JSON字符串与java对象的互换实例详解(转)
http://www.jb51.net/article/90914.htm 在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JSON等,JSON作为一个轻量级的数据格式比xml效率要 ...
随机推荐
- XMPP and Asterisk integration
http://www.mundoopensource.com.br/en_page_xmpp_asterisk_pratical_example/ www.mundoopensource.com.br ...
- django运行django-admin.py无法创建网站
安装django的步骤: 1.安装python,选择默认安装在c盘即可.设置环境变量path,值添加python的安装路径. 2.下载ez_setup.py,下载地址:http://peak.tele ...
- v
360导航_新一代安全上网导航 http://www.cnblogs.com/xiaoheimiaoer/p/4309131.html
- 长沙Uber优步司机奖励政策(1月25日~1月31日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Codeforces Round #387(div 2)
A =w= B VOV C QoQ D 题意:贝尔兰冬天很冷,那么司机要换上冬天专用轮胎才能开车.假设冬天一共有n天,有一套冬天专用轮胎,仅能使用k天,这套轮胎不管什么温度都能用,而夏天用的轮胎只能在 ...
- bzoj2657: [Zjoi2012]旅游(journey)
求树的直径 真是太神辣 #include<cstdio> #include<cstring> #include<cstdlib> #include<algor ...
- 推荐一个markdown编辑器-MarkdownPad
MarkdownPad - The Markdown Editor for Windows是一个很不错的windows下的markdown的编辑器,对于我这种总是记不住各种语法的人来说,非常方便. 免 ...
- Activity透明/半透明效果的设置transparent(两种实现方法)
两种方法实现Activity透明/半透明效果的设置,代码思路很有调理,感兴趣的朋友可以参考下,希望本文可以帮助到你 方法一:res/values文件夹下建立styles.xml: 复制代码代码如下 ...
- Light OJ 1114 Easily Readable 字典树
题目来源:Light OJ 1114 Easily Readable 题意:求一个句子有多少种组成方案 仅仅要满足每一个单词的首尾字符一样 中间顺序能够变化 思路:每一个单词除了首尾 中间的字符排序 ...
- [Javascript] Array - Conact
For example there are two array of object and you want to print out each element, it is bad if you u ...