你的位置:首页 > Java教程

[Java教程]get获取json数据并以表格形式生成到页面


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jq-get方法</title>

<script type="text/javascript" src="../jquery-2.1.3.min.js"></script>

<script type="text/javascript">

$(function(){

                     $("input").click(function(){

                             $.get("test.json",function(data){

                                     var data=data;

                                     var str="<table  border=1 width=100%>";

                                     str+="<tr>";

                                     for(var n in data[0]){

                                             str+="<th>"+n+"</th>";

                                     }

                                     str+="</tr>";

                                     for(var i=0;i<data.length;i++){

                                             str+="<tr>";

                                             for(var n in data[i]){

                                                     str+="<td align='center'>"+data[i][n]+"</td>";

                                             }

                                             str+="</tr>";

                                     }

                                     str+="</table>";

                                     $("div").html(str);

                             })

                     })

             })

</script> 

</head> 

 

<body>

<input type="button" value="向服务器发出异步请求" />

<div></div>

</body> 

 

</html>

 

test.json文件:

[

{

"name": "艳艳",

"pass": "123456",

"age": "26"

 

},

{

"name": "张三",

"pass": "88888888",

"age": "28"

 

},

{

"name": "李四",

"pass": "111111",

"age": "29"

 

}

]