jQuery异步获取json数据的2种方式
2023-09-11 14:16:51 时间
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方法。
相关文章
- js jquery - 获取元素(父节点,子节点,兄弟节点),元素筛选 (转载)
- jQuery的$.ajax示例
- jQuery - 下拉框
- chrome浏览器下用jQuery的load函数来跨域加载页面,响应状态status为(canceled)是什么情况? JSON和JSONP,也许你会豁然开朗,含jQuery用例
- 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js
- jQuery 2.0.3 源码分析 数据缓存
- jQuery插件 -- Form表单插件jquery.form.js
- ASP.NET利用JQuery实现AJAX(前台脚本代码)调用后台静态方法
- 第一百六十二节,jQuery入门介绍
- jQuery跨域请求,跨域Post提交数据的方法(.net/SQL技术交流群206656202 入群需注明博客园) - 思...
- jQuery 提交 数据
- JQuery模板插件-jquery.tmpl
- paip.提升效率--数据绑定到table原理和流程Angular js jquery实现
- jquery清空表单数据
- jQuery UI 主题
- js (jQuery)分组数据
- jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)
- bootstrap jQuery Ztree异步载入数据,check选择&可加入、改动、删除节点
- springMVC框架下JQuery传递并解析Json数据
- jquery的extend和fn.extend
- jquery案例14——ajax、请求接口、处理接口返回数据
- jquery案例10——下拉列表显示、二级菜单