jQuery读取XML文件内容的方法


Posted in Javascript onMarch 09, 2015

本文实例讲述了jQuery读取XML文件内容的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>jQuery读取XML文件</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">

        h1{color:Green;text-align:center;}

        body{ background-color:#EEEEEE ; font-family:微软雅黑; }

        #showresult{width:600px;overflow:hidden;}

    </style>

    <script type="text/javascript" src="jquery/1.4.4/jquery.min.js"></script>   

    <script type="text/javascript">

        $(document).ready(function () {

            $("#read").click(function () {

                $.ajax({

                    //请求方式为get

                    type: "GET",

                    //xml文件位置

                    url: "sitemap.xml",

                    //返回数据格式为xml

                    dataType: "xml",

                    //请求成功完成后要执行的方法

                    success: function (xml) {

                        $(xml).find("url").each(function (i) {

                            //i从0开始,累加,如果要显示所有数据,将判断去除即可

                            if (i < 10) {

                                //链接地址

                                var location = $(this).find("loc").text();

                                //显示文字

                                var text = $(this).find("loc").text();

                                //动态加载方法:链接地址

                                $("<a>").attr("href", location)

                                //显示文字

                            .text(text)

                                //设置样式

                            .css({ "width": "700px", "float": "left", "margin-bottom": "5px" })

                                //加载到div

                            .appendTo("#showresult");

                            }

                        })

                    }

                });

                return false;

            });

        });

    </script>

</head>

<body>

    <div id="showresult">

        <h1>jQuery读取XML文件</h1>

        <a id="read" href="#" style="width:700px;">点击读取XML</a>

    </div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript 函数中的参数使用分析
Mar 27 Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 #Javascript
Python脚本后台运行的几种方式
Mar 09 #Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 #Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 #Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 #Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 #Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 #Javascript
You might like
用PHP调用数据库的存贮过程!
2006/10/09 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
Python代码的打包与发布详解
2014/07/30 Python
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
python中list循环语句用法实例
2014/11/10 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
联谊活动策划书
2014/01/26 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
校庆标语集锦
2014/06/25 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python
python数字图像处理:图像简单滤波
2022/06/28 Python