欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery基于Ajax實現(xiàn)讀取XML數(shù)據(jù)功能示例

 更新時間:2018年05月31日 12:14:54   作者:踏踏實實干  
這篇文章主要介紹了jQuery基于Ajax實現(xiàn)讀取XML數(shù)據(jù)功能,結(jié)合實例形式分析了jQuery基于ajax的get方式獲取xml文件數(shù)據(jù)并輸出顯示相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jQuery基于Ajax實現(xiàn)讀取XML數(shù)據(jù)功能。分享給大家供大家參考,具體如下:

<%@ 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.dbjr.com.cn 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>

運行結(jié)果:

PS:這里再為大家提供幾款關(guān)于xml操作相關(guān)在線工具供大家參考使用:

在線XML/JSON互相轉(zhuǎn)換工具:
http://tools.jb51.net/code/xmljson

在線格式化XML/在線壓縮XML
http://tools.jb51.net/code/xmlformat

XML在線壓縮/格式化工具:
http://tools.jb51.net/code/xml_format_compress

xml代碼在線格式化美化工具:
http://tools.jb51.net/code/xmlcodeformat

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery操作xml技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)

希望本文所述對大家jQuery程序設(shè)計有所幫助。

相關(guān)文章

最新評論