编程 Javascript

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程序设计有所帮助。

jQuery读取XML文件内容的方法

- Author -

hcqenjoy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

表格隔行换色升级版

Nov 07 Javascript

jquery+css+ul模拟列表菜单具体实现思路

Apr 15 Javascript

JS+JSP checkBox 全选具体实现

Jan 02 Javascript

Jquery实现的一种常用高亮效果示例代码

Jan 28 Javascript

JavaScript中的apply和call函数详解

Jul 20 Javascript

微信小程序实现拖拽事件监听实例详解

Nov 16 Javascript

JavaScript字符集编码与解码详谈

Feb 02 Javascript

vue2实现数据请求显示loading图

Nov 28 Javascript

Vue.js实现数据响应的方法

Aug 13 Javascript

简单了解vue中的v-if和v-show的区别

Oct 08 Javascript

JS array数组检测方式解析

May 19 Javascript

详解Vue的mixin策略

Nov 19 Vue.js

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