zoukankan      html  css  js  c++  java
  • jq: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"

    }

    ]

  • 相关阅读:
    Linux systemtap定位系统IO资源使用情况(ok)
    DISK 100% BUSY,谁造成的?(ok)
    容易被误读的IOSTAT
    利用BLKTRACE分析IO性能
    iowait 过高问题的查找及解决linux
    top后台执行显示:top: failed tty get 错误
    Nginx解读内置非默认模块 ngx_http_stub_status_module
    Nginx健康检查模块
    平滑升级你的Nginx
    Practice telephone techniques
  • 原文地址:https://www.cnblogs.com/niwalala/p/5099627.html
Copyright © 2011-2022 走看看