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实现div跟随鼠标移动
Aug 20 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
使用jQuery实现购物车
Oct 29 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
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
vue实现验证码输入框组件
2017/12/14 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python flask 多对多表查询功能
2017/06/25 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python按钮的响应事件详解
2019/03/04 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
用python写爬虫简单吗
2020/07/28 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
python中PyQuery库用法分享
2021/01/15 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
幼儿园实习自我鉴定
2013/12/15 职场文书
培训自我鉴定
2014/01/31 职场文书
闭幕式主持词
2014/04/02 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL