jQuery基于Ajax实现读取XML数据功能示例

2019-11-19 13:44:36

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery基于Ajax实现读取XML数据功能。分享给大家供大家参考，具体如下：

<%@ 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>www.VeVB.COm jQuery使用ajax获取xml</title>  <style type="text/css">  </style>  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></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>

Friend.xml：

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

运行结果：