• 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"

    }

    ]

  • 相关阅读:
    手机web页面调用手机QQ实现在线聊天的效果
    Java EE 6 最终草案暗示了平台的未来发展方向
    NetBeans 时事通讯(刊号 # 77 Oct 21, 2009)
    Java 依赖注射规范(JSR330)正式发布
    NetBeans IDE 6.8 里程碑 2 已经可用!
    Java 依赖注射规范(JSR330)正式发布
    对面向对象和面向过程的一些新理解
    NetBeans 时事通讯(刊号 # 76 Oct 13, 2009)
    Java EE 6 最终草案暗示了平台的未来发展方向
    “当前不会命中断点。源代码与原始版本不同”的问题的有效解决办法
  • 原文地址:https://www.cnblogs.com/niwalala/p/5099627.html
Copyright © 2020-2023  润新知