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实现文章图片弹出放大效果
Apr 06 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
js函数般调用正则
2008/04/08 Javascript
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
python实现发送邮件及附件功能
2021/03/02 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
python得到windows自启动列表的方法
2018/10/14 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
python数据化运营的重要意义
2019/11/25 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
python实现按日期归档文件
2021/01/30 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
售后服务经理岗位职责
2014/02/25 职场文书
项目采购员岗位职责
2014/04/15 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
超市创意活动方案
2014/08/15 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
大学生助学金感谢信
2015/01/21 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
运动会100米广播稿
2015/08/19 职场文书