使用getJSON()
方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为:
jQuery.getJSON(url,[data],[callback])
或$.getJSON(url,[data],[callback])
其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
例如,点击页面中的“加载”按钮,调用getJSON()
方法获取服务器中JSON格式文件中的数据,并遍历数据,将指定的字段名内容显示在页面中。如下图所示:
在浏览器中显示的效果:
从图中可以看出,当点击“加载”按钮时,通过getJSON()
方法调用服务器中的sport.json文件,获取返回的data文件数据,并遍历该数据对象,以data[“name”]
取出数据中指定的内容,显示在页面中。
有几个地方不好理解:
function(data)是getJSON()方法的回调函数,也就是说执行了getJSON()方法后它就会执行,这里的data就是由getJSON方法从服务器地址取的数据,不需要定义。至于sport的话,你可以参考一下jQuery中each()函数的用法:
1
2
|
$(selector).each( function (index,element))
在这个例子中就相当于$.each(data, function (index,sport))
|
index就是取到的数据在数组中的位置,element就是具体的数据对象,sport作为function的参数,实际传入的是data数组中第index个对象,即data[index],是一个json对象,所以sport["name"]就是这个json对象中的name对应的值。