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. ABP vNext EventBus For RabbitMQ 分布式事件总线使用注意事项_补充官网文档

    [https://docs.abp.io/zh-Hans/abp/latest/Distributed-Event-Bus-RabbitMQ-Integration](ABP vNext官方文档链接) ...

  2. netty启动流程

    本文通过对netty服务端.客户端的启动流程分析, 让大家对netty是如何启动运行的. 废话不多说,上源码!!! 建议读者学习netty下的jar类型为 netty-example,里面有很多exa ...

  3. 【C++】《Effective C++》第三章

    第三章 资源管理 条款13:以对象管理资源 当申请一块动态内存时,可能会发生内存泄漏. class Investment {}; void f() { Investment* pInv = creat ...

  4. 【LeetCode】365.水壶问题

    题目描述 解题思路 思路一:裴蜀定理-数学法 由题意,每次操作只会让桶里的水总量增加x或y,或者减少x或y,即会给水的总量带来x或y的变化量,转为数字描述即为:找到一对整数a,b使得下式成立: ax+ ...

  5. 【Docker】Docker启动停止重启 Redirecting to /bin/systemctl start docker.service

    [root@liuawen local]# docker -v Docker version 1.13.1, build cccb291/1.13.1 [root@liuawen local]# 启动 ...

  6. 【Linux】zabbix4.0服务器搭建,agent搭建,及邮件使用方法

    zabbix默认的 服务端监听端口为10051,而被监控端即Zabbix--agents代理程序监控10050端口. 更新yum源: yum clean all yum makecache 需要配置网 ...

  7. 【MYSQL】MySQL5.6.37二进制安装

    最近有个项目要用到mysql 于是在mysql的论坛中找到了一个5.6.37版本的 下面介绍怎么安装和使用mysql 下载地址: https://dev.mysql.com/downloads/mys ...

  8. Mybatis执行流程学习之手写mybatis雏形

    Mybatis是目前开发中最常用的一款基于ORM思想的半自动持久层框架,平时我们都仅仅停留在使用阶段,对mybatis是怎样运行的并不清楚,今天抽空找到一些资料自学了一波,自己写了一个mybatis的 ...

  9. 24V转5V稳压芯片,高效率的同步降压DC-DC变换器3A输出电流

    PW2330开发了一种高效率的同步降压DC-DC变换器3A输出电流.PW2330在4.5V到30V的宽输入电压范围内工作集成主开关和同步开关,具有非常低的RDS(ON)以最小化传导损失.PW2330采 ...

  10. Docker镜像仓库Harbor安装

    export VERSION=18.06 && curl -fsSL http://rainbond-pkg.oss-cn-shanghai.aliyuncs.com/releases ...