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中的new的使用方法与注意事项
May 16 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 Javascript
js实现圆形菜单选择器
Dec 03 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查询搜索引擎排名位置的代码
2010/01/05 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php 中的closure用法详解
2017/06/12 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
javascript web对话框与弹出窗口
2009/02/22 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
应届生法律顾问求职信
2013/11/19 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
美德好少年事迹材料
2014/01/19 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
2019广播稿怎么写
2019/04/17 职场文书