Home >Web Front-end >JS Tutorial >How to read XML file content with jQuery

How to read XML file content with jQuery

php中世界最好的语言Original: 2018-04-23 14:13:292406browse

This time I will show you how to read the content of XML files with jQuery. What are the precautions for jQuery to read the content of XML files? The following is a practical case, let's take a look.

<!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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to read XML file content with jQuery

Related articles