jQuery怎么读取XML文件内容-js教程-PHP中文网

首页

web前端

js教程

jQuery怎么读取XML文件内容

php中世界最好的语言

Apr 23, 2018 pm 02:13 PM

jquery内容文件

这次给大家带来jQuery怎么读取XML文件内容，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" })
                                //加载到p
                            .appendTo("#showresult");
                            }
                        })
                    }
                });
                return false;
            });
        });
    </script>
</head>
<body>
    <p id="showresult">
        <h1>jQuery读取XML文件</h1>
        <a id="read" href="#" style="width:700px;">点击读取XML</a>
    </p>
</body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

PHP+jQuery插件异步上传文件步骤详解

jQuery如何转换url地址获取url目录

以上是jQuery怎么读取XML文件内容的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn