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 ...
随机推荐
- gcc/g++ 命令
gcc & g++现在是gnu中最主要和最流行的c & c++编译器 .g++是c++的命令,以.cpp为主,对于c语言后缀名一般为.c.这时候命令换做gcc即可.其实是无关紧要的.其 ...
- 20165203《Java程序设计》第八周学习总结
20165203<Java程序设计>第八周学习总结 教材学习内容总结 第12章 进程与线程 进程的完成过程:代码加载.执行至执行完毕 线程:一个进程由多个线程组成. 线程的完成过程:自身的 ...
- 关于jedis2.4以上版本的连接池配置,及工具类
jedis.propertise 注意以前版本的maxAcitve和maxWait有所改变,JVM根据系统环境变量ServerType中的值 取不同的配置,实现多环境(测试环境.生产环境)集成. re ...
- chromiumFx编译使用
CEF chormeFx 为针对.Net的CEF框架,下载链接为: https://bitbucket.org/chromiumfx/chromiumfx 点击Download可以下载chromium ...
- USACO 6.1 Postal Vans(一道神奇的dp)
Postal Vans ACM South Pacific Region -- 2003 Tiring of their idyllic fields, the cows have moved to ...
- 全文搜索引擎 Elasticsearch (二) 使用场景
1.场景—:使用Elasticsearch作为主要的后端 传统项目中,搜索引擎是部署在成熟的数据存储的顶部,以提供快速且相关的搜索能力.这是因为早期的搜索引擎不能提供耐用的存储或其他经常需要的功能 ...
- select 1 from dual
begin 2018年7月14日15:06:29 select 1 from dual Oracle下的select 1 from dual 今天在看公司代码的时候,发现有这一句SQL: select ...
- 使用Swing的JSpinner组件设置日期时间选择器
代码: //获得时间日期模型 SpinnerDateModel model = new SpinnerDateModel(); //获得JSPinner对象 JSpinner year = new J ...
- 不要62 hdu 2089 dfs记忆化搜索
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2089 题意: 给你两个数作为一个闭区间的端点,求出该区间中不包含数字4和62的数的个数 思路: 数位dp中 ...
- web客户端安全之跨站脚本攻击
跨站脚本攻击,Cross-site script,是Web程序中最常见的漏洞.为了和CSS层叠样式表区分开,所以取名为 XSS. 一.XSS的重点 跨域和客户端执行. 二.XSS的原理 攻击者向有XS ...