使用getJSON()方法异步加载JSON格式数据
使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中，它的调用格式为：
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>使用getJSON()方法异步加载JSON格式数据</title> 5 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 6 </head> 7 <style> 8 #divtest 9 { 10 282px; 11 } 12 #divtest .title 13 { 14 padding: 8px; 15 background-color:Blue; 16 color:#fff; 17 height: 23px; 18 line-height: 23px; 19 font-size: 15px; 20 font-weight: bold; 21 } 22 ul 23 { 24 float: left; 25 280px; 26 padding: 5px 0px; 27 margin: 0px; 28 font-size: 14px; 29 list-style-type: none; 30 } 31 ul li 32 { 33 float: left; 34 280px; 35 height: 23px; 36 line-height: 23px; 37 padding: 3px 8px; 38 } 39 .fl 40 { 41 float: left; 42 } 43 .fr 44 { 45 float: right; 46 } 47 </style> 48 <body> 49 <div id="divtest"> 50 <div class="title"> 51 <span class="fl">我最喜欢的一项运动</span> 52 <span class="fr"> 53 <input id="btnShow" type="button" value="加载" /> 54 </span> 55 </div> 56 <ul></ul> 57 </div> 58 59 <script type="text/javascript"> 60 $(function () { 61 $("#btnShow").bind("click", function () { 62 var $this = $(this); 63 $.getJSON("./sport.json",function(data){ 64 $this.attr("disabled", "true"); 65 $.each(data,function(index,sport){ 66 //if(index==3) 67 $("ul").append("<li>" + sport["name"] + "</li>"); 68 }); 69 70 }); 71 }) 72 }); 73 </script> 74 </body> 75 </html>
1 [{"name":"足球"},{"name":"篮球"},{"name":"乒乓球"},{"name":"排球"}]