【jQuery】使用getJSON()方法异步加载JSON格式数据

使用

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()函数的用法：
index就是取到的数据在数组中的位置，element就是具体的数据对象，sport作为function的参数，实际传入的是data数组中第index个对象，即data[index]，是一个json对象，所以sport["name"]就是这个json对象中的name对应的值。