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 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
javascript function、指针及内置对象
Feb 19 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
详解AngularJS 模块化
Jun 14 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
PHP 在线翻译函数代码
2009/05/07 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
php中数组最简单的使用方法
2020/12/27 PHP
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
21行Python代码实现拼写检查器
2016/01/25 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
妈妈的账单教学反思
2014/02/06 职场文书
专家推荐信模板
2014/05/09 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
学校教学管理制度
2015/08/06 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android