1、jQuery读取JSON

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery读取JSON</title>
</head>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$.getJSON("JSON/UserInfo.json",function(data){
var str="";
$.each(data,function( i,field){
$.each( field,function(k,v){
str+=k+":"+v+"<br/>"
})
str+="<br/>";
})
$("p").html(str);
})
})
})
</script>
<body>
<div>
<div id="btn">
<input type="button" value="读取JSON数据" id="btn"/>
</div>
<p></p>
</div>
</body>
</html>

2、jQuery加载XML文档

<!DOCTYPE html>
<html>
<head>
<title>使用jQuery加载XML文档</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
$("#getxml").click(function(){
$.ajax({
type:"get",
url:"5-3.xml",
dataType:"xml",
timeout:1000,
cache:false,//禁止缓存
success:function(data){
var frag=$("<ul/>");
$(data).find("student").each(function(){
var name=$(this).children("name");
var sex=$(this).children("sex");
var email=$(this).children("email");
name_value=name.text();
sex_value=sex.text();
email_value=email.text();
frag.append("<li>姓名:"+name_value+"性别:"+sex_value+"邮箱:"+email_value+"</li>");
});
frag.appendTo("#load");
$("li").css("list-style-type","none");
}
});
})
})
</script>
</head>
<body>
<input type="button" name="" id="getxml" value="加载xml">
<div id="load"></div>
</body>
</html>

  

jQuery读取数据的更多相关文章

  1. json数据的格式,JavaScript、jQuery读取json数据

    JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON的特点: JSON 是纯文本 JSON 具有“自我描述性”(人类可读) JSON 具有层级 ...

  2. Highcharts使用简例 + 异步动态读取数据

    第一部分:在head之间加载两个JS库. <script src="html/js/jquery.js"></script> <script src= ...

  3. echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端

    1.echarts的官网上的demo,都是直接写死的随机数据,没有和数据库的交互,所以就自己写了一下,ok,我们开始一步一步走一遍整个流程吧. 就以官网最简单的那个小demo来做修改吧.官网上的小de ...

  4. jQuery.data的是jQuery的数据缓存系统

    jQuery.Data源码 jQuery.data的是jQuery的数据缓存系统 jQuery.data的是jQuery的数据缓存系统.它的主要作用就是为普通对象或者DOM元素添加数据. 1 内部存储 ...

  5. Jquery实现数据双向绑定(赋值和取值),类似AngularJS

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  6. struts2中从后台读取数据到<s:select>

    看到网上好多有struts2中从后台读取数据到<s:select>的,但都 不太详细,可能是我自己理解不了吧!所以我自己做了 一个,其中可能 有很多不好的地方,望广大网友指出 结果如图 p ...

  7. [MVC4]ASP.NET MVC4+EF5(Lambda/Linq)读取数据

    继续上一节初始ASP.NET MVC4,继续深入学习,感受了一下微软的MVC4+EF5(EntityFramework5)框架的强大,能够高效的开发出网站应用开发系统,下面就看一下如何用MVC4+EF ...

  8. jQuery缓存数据

    很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如 1 2 3 4 <div data="some data">Test</div> < ...

  9. ubuntu server 12.04U盘安装,提示无法挂载安装光盘或光盘读取数据出错

    今天用Ultraiso将Ubuntu server 12.04 刻入U盘中安装系统,中间提示错误:1.检测不到cdrom(即U盘没有挂载上):2.从光盘中读取数据出错.问题如下图所示: 上网搜了下解决 ...

随机推荐

  1. 利用PHP递归 获取所有的上级栏目

    /** * 获取所有的上级栏目 * @param $category_id * @param array $array * @return array * @author 宁佳兵 <meilij ...

  2. CSS 奇技淫巧:动态高度过渡动画

    这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了? 伪代码大概是这样: { height: unset; transition: all 0.3s linear; ...

  3. new ArrayList(0) 和 new ArrayList() 和一样吗?

    第一感觉是一样的,盲猜后者调用了前者,并传入参数 0.然而,无论是 JDK 7 还是 JDK 8,这两个方法构造的结果都是不一样的.JDK 开发人员在这方面作了优化. JDK 7 在 Java 7 中 ...

  4. Jenkins上实现Python + Jenkins + Allure Report 接口自动化测试持续集成,最终测试报告用allure-report进行展示

    项目介绍 接口功能测试应用:http://www.weather.com.cn/data/cityinfo/<city_code>.html 测试功能:获取对应城市的天气预报 源码:Pyt ...

  5. Memcached、Redis、Mongodb比较

    Memcached(内存Cache) Memcached 是一个高性能的分布式内存对象缓存系统.通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库 ...

  6. ./utils/build.sh: line 131: patch: command not found

    安装 percona-xtrabackup-2.1.5过程中遇到如下问题: [root@test percona-xtrabackup-2.1.5]# ./utils/build.sh innodb5 ...

  7. 给mysql选择调度策略

    在gun/linux上,队列调度决定了到块设备的请求实际上发送到底层设置的顺序.默认情况下是cfg(完全公平排队)策略,随意使用的笔记本和台式机使用中个调度策略没有问题,并且有助于防止io饥饿,但是用 ...

  8. Spring Validation 验证

    基本配置 1.pom引入maven依赖 <dependency> <groupId>javax.validation</groupId> <artifactI ...

  9. java基础-01代理类

    简单的代理类实现案例主实现类:ProxyTestimport java.lang.reflect.InvocationHandler;import java.lang.reflect.Proxy;im ...

  10. https://twistedmatrix.com/documents/current/core/howto/defer.html

    https://twistedmatrix.com/documents/current/core/howto/defer.html