집 > 기사 > 웹 프론트엔드 > jQuery를 사용하여 XML 파일 내용을 읽는 방법

jQuery를 사용하여 XML 파일 내용을 읽는 방법

php中世界最好的语言원래의: 2018-04-23 14:13:292303검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!