当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery基于Ajax实现读取XML数据功能示例

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

2018年08月05日  | 移动技术网IT编程  | 我要评论

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

运行结果：

ps：这里再为大家提供几款关于xml操作相关在线工具供大家参考使用：

在线xml/json互相转换工具：

在线格式化xml/在线压缩xml：

xml在线压缩/格式化工具：

xml代码在线格式化美化工具：

更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery操作xml技巧总结》、《jquery中ajax用法总结》、《jquery扩展技巧总结》、《jquery常用插件及用法总结》、《jquery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jquery程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网