JQuery解析HTML、JSON和XML实例详解


Posted in Javascript onMarch 29, 2014

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文件,效果如下

JQuery解析HTML、JSON和XML实例详解

点第一个超链接会在Show Content区域显示新插入的html片段

JQuery解析HTML、JSON和XML实例详解

点第二个超链接,会显示json数据:

JQuery解析HTML、JSON和XML实例详解

点第三个超链接,会显示xml数据:

JQuery解析HTML、JSON和XML实例详解

Javascript 相关文章推荐
javascript高亮效果的二种实现方法
Sep 14 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
javascript函数特点实例分析
May 14 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 #Javascript
javascript修改IMG标签的src问题
Mar 28 #Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 #Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 #Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 #Javascript
js如何调用qq互联api实现第三方登录
Mar 28 #Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 #Javascript
You might like
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
使用Python绘制图表大全总结
2017/02/11 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
详解Python IO编程
2020/07/24 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
出纳担保书范文
2014/04/02 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫