使用getJSON方法异步加载JSON格式数据

$.getJSON():用于加载JSON文件（和$.getJavaScript()方法相同）：

可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，它的调用格式为：

jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

点击页面中的“加载”按钮，调用getJSON()方法获取服务器中JSON格式文件中的数据，并遍历数据，将指定的字段名内容显示在页面中。

效果图：

代码如下：css样式可以根据自己的喜好设置，script引用的是jQuery文件

下边是json文件：

新建一个JSON文件，然后将需要的内容利用数组存入，下边介绍的是json的书写格式

json实际上是JavaScript的的一个子集，所以JSON 的数据格式和 JavaScript 是对应的

 number => JS number 
 boolean => JS boolean
 string => JS string //
 null => JS null 
 array => JS Array 的表达方式 []
 object => JS {} 表达式

• JSON 规定字符集是UTF-8，字符串必须使用""，Object 的键也必须使用""
• 数组或对象的最后一个成员，不能加 逗号

1、数组方式 [ ]

[{
"id" : 1 ,
"name" : "xiaoming"
},{
"id" : 2 , 
"name" : "xiaohong"
}]

2、对象方式

//前后端分离，推荐后端返回给前端数据格式
{
"status" : 0 ,          //执行状态码
"msg"    : "SUCCESS",   //说明文字信息，没有为NULL
"data"   :[{            //对象中嵌套数组，数组是返回的数据，
"id"    : 1 ,
"name"  : "xiaohong"
},{
"id"    : 2,
"name"  : "xiaoming"
}]
}

上述为用getJSON方法异步加载JSON格式数据的全部内容。