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

程序员文章站 2022-04-10 17:50:32

本文实例讲述了jquery基于ajax实现读取xml数据功能。分享给大家供大家参考，具体如下： <%@ page language="c#" autoeve...

本文实例讲述了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.jb51.net 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>

运行结果：

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