jQuery异步获取json数据的2种方式
jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法。本篇体验使用这2种方式异步获取json数据,然后追加到页面。
在根目录下创建data.json文件:
{"one" : "Hello","two" : "World"}
■ 通过$.getJSON方法获取json数据
<script src="Scripts/jquery-2.1.1.min.js"></script><script type="text/javascript">$(function() {$.getJSON('data.json', function(data) {var items = [];$.each(data, function(key, val) {items.push('<li id="' + key + '">' + val + '</li>');});$('<ul/>', {'class': 'list',html: items.join('')}).appendTo('body');});});</script>
■ 通过$.ajax方法获取json数据
<script src="Scripts/jquery-2.1.1.min.js"></script><script type="text/javascript">$(function() {$.ajax({url: 'data.json',dataType: 'json',success: function(data) {var items = [];$.each(data, function(key, val) {items.push('<li id="' + key + '">' + val + '</li>');});$('<ul/>', {'class': 'list',html: items.join('')}).appendTo('body');},statusCode: {404: function() {alert("没有找到相关文件~~");}}});});</script>
总结:使用$.getJSON方法和$.ajax方法都能达到相同的效果,但是,如果想对异步获取的过程有更细节的控制,推荐使用$.ajax方法。
jQuery异步获取json数据的2种方式的更多相关文章
- SparkStreaming获取kafka数据的两种方式:Receiver与Direct
简介: Spark-Streaming获取kafka数据的两种方式-Receiver与Direct的方式,可以简单理解成: Receiver方式是通过zookeeper来连接kafka队列, Dire ...
- 【代码笔记】iOS-向服务器传JSON数据的两种方式
一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...
- jQuery AJAX获取JSON数据解析多种方式示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 遍历json数据的几种方式。
json(JavaScript Object Notation),json是一种多用于存储和交换文本信息的语法.他能够进行数据的传输,通常和ajax一起使用.它具有体积小.速度快,易解析等诸多优点. ...
- 遍历json数据的几种方式
json(JavaScript Object Notation),json是一种多用于存储和交换文本信息的语法.他能够进行数据的传输,通常和ajax一起使用.它具有体积小.速度快,易解析等诸多优点. ...
- PHP获取POST数据的三种方式
一.PHP获取POST数据的几种方法 方法1.最常见的方法是:$_POST['fieldname']; 说明:只能接收Content-Type: application/x-www-form-urle ...
- 用JQuery解析获取JSON数据
JSON 是一种比较方便的数据形式,下面使用$.getJSON方法,实现获得JSON数据和解析,都挺方便简单的.从http://api.flickr.com/services/feeds/photos ...
- spring mvc 返回json数据的四种方式
一.返回ModelAndView,其中包含map集 /* * 返回ModelAndView类型的结果 * 检查用户名的合法性,如果用户已经存在,返回false,否则返回true(返回json数据,格式 ...
- SpringMVC返回json数据的三种方式
1.第一种方式是spring2时代的产物,也就是每个json视图controller配置一个Jsoniew. 如:<bean id="defaultJsonView" cla ...
随机推荐
- kafka基本版与kafka acl版性能对比(单机版)
一.场景 线上已经有kafka集群,服务运行稳定.但是因为产品升级,需要对kakfa做安全测试,也就是权限验证. 但是增加权限验证,会不会对性能有影响呢?影响大吗?不知道呀! 因此,本文就此来做一下对 ...
- Django和Mysql合用时,显示时间问题
这个以前没系统处理过,感觉前端页面显示正常,就OK. 但有的不重要的地方,显示有8小时错乱,也没有列入优先级处理. 昨天下细看了一些网上文档,找取了解决思路. 大致想法是:数据库里存+00:00时区的 ...
- sql server2014 企业版 百度云下载
sql server2014 企业版 百度云下载 链接: https://pan.baidu.com/s/1j7a6RWwpvSzG-sF7Dnexfw 提取码: 关注公众号[GitHubCN]回复获 ...
- JSON解析代码
/** * 解析有数据头的纯数组 */ private void parseHaveHeaderJArray() { //拿到本地JSON 并转成String String strByJson = J ...
- 【51nod】1709 复杂度分析
题解 考虑朴素的暴力,相当于枚举u点的每个祖先f,然后统计一下这个点f除了某个儿子里有u的那个子树之外的节点个数,乘上f到u距离的二进制1的个数 那么我们用倍增来实现这个东西,每次枚举二进制的最高位j ...
- 如何解决谷歌Chrome浏览器空白页的问题
如何解决谷歌Chrome浏览器空白页的问题 谷歌Chrome浏览器突然不打开任何网页,无论是任何站点(如http://www.baidu.com), 还是Chrome浏览器的设置页面(chrome ...
- 002 python语法入门
一:基本数据类型知识点 1.基本数据类型 Number 数字 String 字符串 Bool 布尔 List 列表 Tuple 元组 Set 集合 Dictionary字典 2.分类 )标准的pyth ...
- The file will have its original line endings in your working directory.
在空仓库的情况下,add,出现一下问题 The file will have its original line endings in your working directory. 当报这个警告时是 ...
- 洛谷——P1231 教辅的组成
P1231 教辅的组成 题目背景 滚粗了的HansBug在收拾旧语文书,然而他发现了什么奇妙的东西. 题目描述 蒟蒻HansBug在一本语文书里面发现了一本答案,然而他却明明记得这书应该还包含一份练习 ...
- [代码审计]某开源商城前台getshell
0x00 前言 这套系统搞了有点久了,漏洞是发现了,但一直卡在某个地方迟迟没拿下来. 下面就分享一下自己审这套系统的整个过程. 0x01 系统简介 略 0x02 审计入口 看到inc\functi ...