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 回车换行处理的办法及replace方法应用
Jan 24 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 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常用正则表达式集锦
2014/08/17 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
Python Tkinter基础控件用法
2014/09/03 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
django 信号调度机制详解
2019/07/19 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
计算机专业毕业生自荐信
2013/12/31 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
Python日志模块logging用法
2022/06/05 Python