jQuery讀取XML文件內容的方法

2024-05-06 16:16:19

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jQuery讀取XML文件內容的方法,實例分析了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" })
		                                //加載到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>