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 ...
随机推荐
- POJ 2195 Going Home(KM算法模板)
题目链接:http://poj.org/problem?id=2195 题目大意: 给定一个N*M的地图,地图上有若干个man和house,且man与house的数量一致. man每移动一格需花费$1 ...
- Sql Server2005 Transact-SQL 新兵器学习总结之-排名函数
Transact-SQL提供了4个排名函数: rand() , dense_rand() , row_number() , ntile() 下面是对这4个函数的解释:rank() 返回结果集的分区内每 ...
- pip常用命令总结(转载)
基本的命令解释,如下图: 列出已安装的包 pip freeze or pip list 导出requirements.txt pip freeze > <目录>/requiremen ...
- vue-cli中如何集成UEditor 富文本编辑器?
1.根据后台语言下载对应的editor插件版本 地址:https://ueditor.baidu.com/website/download.html 2.将下载好的资源放在/static/uedito ...
- Aspose.Words 自定义文档模版生成操作类
/// <summary> /// 操作word通用类 LIYOUMING add 2017-12-27 /// </summary> public class DocHelp ...
- https页面打不开
https://blog.csdn.net/leedaning/article/details/71552625
- PHP将对象转换成数组的方法(兼容多维数组类型)
/** * @author gayayang * @date 2012-8-21 * @todo 将对象转换成数组 * @param unknown_type $obj * @return unkno ...
- 【LOJ】 #2305. 「NOI2017」游戏
题解 枚举x所在的地图的颜色,然后2-SAT建边 如果v所在的地图刚好是不能选的,那么u这边只能选另一种颜色 否则就是u的颜色到v的颜色 v的另一种颜色到u的另一种颜色 代码 #include < ...
- Numpy的简单用法
Numpy的简单用法 import numpy as np 一.创建ndarray对象 列表转换成ndarray: >>> a = [1,2,3,4,5] >>> ...
- thinphp中auth认证方法使用
一.获取Auth类1.ThinkPHP3.1.3完整版:http://www.thinkphp.cn/down/338.html2.OneThink1.0正式版:https://github.com/ ...