JSON数据获取

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JSON数据获取</title>
 6 </head>
 7 <body>
 8     <ul>
 9     </ul>
10 </body>
11 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
12 <script type="text/javascript">
13     var getDate=function () {
14         $.get("json.json").done(function (data) {
15             var html="";
16             $.each(data,function (index,obj) {
17                     html+="<li>姓名："+obj.name+"</li>"+
18                             "<li>年龄："+obj.age+"</li>"+
19                             "<li>性别："+obj.sex+"</li>";
20             });
21             $("ul").html(html);
22         });
23     };
24     getDate();
25 </script>
26 </html>

json.json-->

[
  {
  "name":"Windy",
  "age":20,
  "sex":"girl"
  },{
  "name":"Max",
  "age":18,
  "sex":"girl"
}
]

页面上的内容是：

姓名：Windy
年龄：20
性别：girl
姓名：Max
年龄：18
性别：girl

运用了jQuery的$.get(),$.done()和$.each()方法。

$.get("json.json").done(function(data){});这里可以理解为把json.json的内容存放在后面的函数中。

$.each(data,function(index,obj){});这里可以理解为把data中的内容遍历到后面的函数中。

$.get()：

$.get(URL,callback) 通过 HTTP GET 请求从服务器上请求数据

必需的URL参数 规定你希望请求的URL
可选的callback参数

$.each()和$().each()的区别：

$(selector).each(function(index,element)) 为每个匹配元素规定运行的函数

必需的函数参数（index索引 element当前元素）

专用于jquery对象的遍历

$.each(data,function(index,obj))

可用于遍历任何的集合(无论是数组或对象)

JSON数据获取

推荐阅读