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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
php中的依赖注入实例详解
2019/08/14 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
python让列表倒序输出的实例
2018/06/25 Python
浅述python中深浅拷贝原理
2018/09/18 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
python实现动态创建类的方法分析
2019/06/25 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
老公婚前保证书
2015/02/28 职场文书
年底个人总结范文
2015/03/10 职场文书