本文实例讲述了jQuery实现异步获取json数据的2种方式,在web程序开发中非常具有实用价值。分享给大家供大家参考之用。具体方法如下:
通常来说,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程序设计有一定的借鉴价值。