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


Posted in jQuery onMay 31, 2018

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

运行结果:

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

jQuery 相关文章推荐
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jquery replace方法去空格
May 08 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 #jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 #jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 #jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 #jQuery
关于jquery中attr()和prop()方法的区别
May 28 #jQuery
jQuery中将json数据显示到页面表格的方法
May 27 #jQuery
jQuery插件jsonview展示json数据
May 26 #jQuery
You might like
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
python学习 流程控制语句详解
2016/06/01 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
python中的句柄操作的方法示例
2019/06/20 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
python读取与处理netcdf数据方式
2020/02/14 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
RetroStage德国:复古服装
2019/02/03 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
高级工程师岗位职责
2013/12/15 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
小学端午节活动方案
2014/03/13 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技