jQuery $.getJSON()方法的用法

在 jQuery 中，我们可以使用 $.getJSON() 方法通过 Ajax 请求获取服务器中 JSON 格式的数据。

语法：

$.getJSON(url ,data, function(data){
 
})

$.getJSON() 是一个全局方法，所谓 全局方法 ，指的是直接定义在 jQuery 对象（即$）下的方法。参数 url 表示被加载的文件地址；参数 data 表示发送到服务器的数据，数据为 键值对 格式；参数 function(data){} 表示请求成功后的回调函数，请求失败是不会处理的。

首先，我们在网站根目录下建立两个文件：一个是 info.json 文件，另一个是 getJSON.html 文件。

其中 info.json 文件内容如下。

 name : 小杰 ,

 sex : 男 ,

 age : 24

 name : 小明 ,

 sex : 男 ,

 age : 24

 name : 小红 ,

 sex : 女 ,

 age : 23

]

举例：

 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 title /title 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function(){

 $( #btn ).click(function(){

 $.getJSON( info.json , function (data) {

 //定义一个变量，用于保存结果

 var str= 

 $.each(data,function(index,info){

 str += 姓名： + info[ name ] + br/ 

 str += 性别： + info[ sex ] + br/ 

 str += 年龄： + info[ age ] + br/ 

 str += hr/ 

 //插入数据

 $( div ).html(str);

 /script 

 /head 

 body 

 input id= btn type= button value= 获取数据 / 

 div /div 

 /body 

 /html 

默认情况下，预览效果如图 1 所示。

图 1：默认效果

我们点击【获取数据】按钮后，此时预览效果如图 2 所示。

图 2：点击按钮后的效果

分析：

$.each(data,function(index,info){

 str += 姓名： + info[ name ] + br/ 

 str += 性别： + info[ sex ] + br/ 

 str += 年龄： + info[ age ] + br/ 

 str += hr/ 

})

上面这段代码用于遍历 JSON 对象，JSON 是一种数据格式，这个属于 JavaScript 的内容。如果小伙伴们不了解 JSON，可以看一下 C语言中文网的 JSON 教程。

在上面这个例子中，我们在使用 $.each() 方法的时候要特别小心。由于该 JSON 本质上是一个数组，因此我们应该使用 $.each() 操作数组的方法，而不是操作对象的方法。

23903.html

C语言htmljavaJavaScript