Jquery Ajax 读取XML 数据_ajax 读取xml文档-优快云博客

本文链接：https://blog.youkuaiyun.com/ws_hgo/article/details/6650800

本文详细介绍了如何利用Jquery的Ajax方法从服务器获取XML文件，并解析XML数据填充到HTML表格中，实现数据的动态加载和展示。通过理解函数的运用，提升前后端交互效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="JqueryAjax_Default" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
    </style>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Display").click(function () {
                $("#message").html('');
                $.ajax({
                    type: "GET",
                    url: "Friend.xml",
                    dataType: "xml",
                    success: function (ResponseText) {
                        var table = "<table border='1px'><tr><td>firstname</td><td>lastname</td><td>city</td></tr>";
                        $(ResponseText).find('friend').each(function () {
                            var first = $(this).find('firstName').text();
                            var last = $(this).find('lastName').text();
                            var city = $(this).find('city').text();
                            table += "<tr><td>" + first + "</td><td>" + last + "</td><td>" + city + "</td></tr>";
                        })
                        table += "</table>";
                        $("#message").append(table);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <label>Display My Friends</label><br />
  <input type="button" value="Display" id="Display" />
  <div id="message"></div>
    </form>
</body>
</html>

<?xml version="1.0" encoding="utf-8" ?>
<friends>
	<friend>
		<name>
			<firstName>Guo</firstName>
			<lastName>Hu</lastName>
		</name>
		<address>
			<province>Shanghai</province>
			<city>PuDong</city>
		</address>
	</friend>
	<friend>
		<name>
			<firstName>Lei</firstName>
			<lastName>Hu</lastName>
		
	</name>
		<address>
			<province>hubei</province>
			<city>xiantao</city>
		</address>
	</friend>
	<friend>
		<name>
			<firstName>JunWen</firstName>
			<lastName>Li</lastName>
		</name>
		<address>
			<province>hubei</province>
			<city>wuhan</city>
		</address>
	</friend>
	<friend>
		<name>
			<firstName>Jinhao</firstName>
			<lastName>Liu</lastName>
		</name>
		<address>
			<province>ShanXi</province>
			<city>Taiyuan</city>
		</address>
	</friend>
	<friend>
		<name>
			<firstName>Cheng</firstName>
			<lastName>Fang</lastName>
		</name>
		<address>
			<province>GuangDong</province>
			<city>GuangZhou</city>
		</address>
	</friend>
</friends>