通过异步获取json来展示数据表格，性能提高不少。实例如下：

前台：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="../jquery-3.1.1.min.js"></script>

    <style type="text/css">

       #table, #table tr,#table th, #table td {

        border:1px solid black;

        border-collapse:collapse;

        text-align:center;

        }

    </style>

    <script>

        $(function () {

            $("#showTable").click(function () {

                var $table = $("#table");

                var name = $("#userName").val();

                var pwd = $("#pwd").val();

                $.ajax({

                    url: "GetStudent.ashx",

                    type: "post",

                    dataType:"json",

                    data: { Name: name, Pwd: pwd },

                    success: function (data) {

                        if (!jQuery.isEmptyObject(data))

                        {

                            $("#table").empty();

                            $("span").html("");

                            $("<th>编号</th><th>姓名</th><th>性别</th> <th>出生日期</th><th>县/区编号</th> <th>专业编号</th><th with=\"50px\">操作</th></tr>").appendTo("#table");

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

                                $("<tr><input type=\"hidden\" value=\""+data[i].Id+"\"/><td>" + data[i].Id + "</td><td>" +

                                    data[i].Name + "</td><td>" + data[i].Sex + "</td><td>" +

                                    data[i].Birthday + "</td><td>" + data[i].DistrictId + "</td><td>" + data[i].MajorId + "</td><td><a href=\"GetStudent.ashx?id="+data[i].Id+"\">修改</a></td></tr>").appendTo("#table");

                            }

                            $("#table tr:even").css("background", "#EBE9C2");

                            $("a").css("text-decoration","none");

                        }

                        else

                        {

                            $("#table").empty();

                            $("span").html("无查询结果");

                        }

                    }

                })

            })

        })

    </script>

</head>

<body>

    <table class="table1">

        <tr>

            <td> 用户名：</td>

            <td><input type="text" id="userName"/></td>

        </tr>

        <tr>

            <td>密码：</td>

            <td><input type="password" id="pwd"/></td>

        </tr>

    </table>

    <input type="button" value="显示列表" id="showTable" />

    <div>

        <table id="table"></table>

    </div>

    <span></span>

</body>

</html>

异步页：

  public void ProcessRequest(HttpContext context)

        {

            string id=context.Request.QueryString["Id"];

            if (string.IsNullOrEmpty(id))

            {

                string result = "{}";

                string name = context.Request.Params["Name"];

                string pwd = context.Request.Params["Pwd"];

                if (name == "admin" && pwd == "123456")

                {

                    string sql = "select * from T_Student";

                    DataTable dt = SqlHelper.ExecuteDataTable(sql);

                    string json = DataTableToJson(dt);

                    result = json;

                }

                context.Response.Write(result);

            }

            else

            {

                string sql = "select * from T_Student where Id=@Id";

                SqlParameter [] sp=new SqlParameter[]{

                        new SqlParameter("@Id",id)

                };

               DataTable dt=  SqlHelper.ExecuteDataTable(sql, sp);

            }

        }

        /// <summary>

        /// 将DataTable转化为json格式

        /// </summary>

        /// <param name="dt"></param>

        /// <returns></returns>

        public string DataTableToJson(DataTable dt)

        {

            StringBuilder Json = new StringBuilder();

            Json.Append("[");

            if (dt.Rows.Count > 0)

            {

                for (int i = 0; i < dt.Rows.Count; i++)

                {

                    Json.Append("{");

                    for (int j = 0; j < dt.Columns.Count; j++)

                    {

                        Json.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":\"" + dt.Rows[i][j].ToString() + "\"");

                        if (j < dt.Columns.Count - 1)

                        {

                            Json.Append(",");

                        }

                    }

                    Json.Append("}");

                    if (i < dt.Rows.Count - 1)

                    {

                        Json.Append(",");

                    }

                }

            }

            Json.Append("]");

            return Json.ToString();

        }

之前不明白的一点是：什么时候用Json.parse()方法。测试之后表明，当$.ajax()方法中指明 dataType:"json" 时，无需用Json.parse()方法解析字符，只要后台传来的数据是正确的json格式就可以。如果不指定dataType，则data中得到的是字符串，如果想要解析为json输出到界面，则需用Json.parse()方法。

获取json数据的更多相关文章

  1. Netflix Falcor获取JSON数据

    Netflix开源了JavaScript库Falcor,它为从多个来源获取JSON数据提供了模型和异步机制. Netflix利用Falcor库实现通过JSON数据填充他们网页应用的用户界面.所有来自内 ...

  2. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  3. jquery用ajax方式从后台获取json数据，将内容填充到下拉列表。

    从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...

  4. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  5. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  6. android客户端从服务器端获取json数据并解析的实现代码

    今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下   首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的U ...

  7. jquery通过ajax方法获取json数据不执行success回调

    问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...

  8. (转)android客户端从服务器端获取json数据并解析的实现代码

    今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下       首先客户端从服务器端获取json数据 1.利用HttpUrlConnection   复制代码 ...

  9. android客户端从服务器端获取json数据并解析的实现代码（重要）

    首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的URL中获取数组 * @param urlPath * @return * @throws Exc ...

  10. Highcharts获取json数据展现pie饼图

    实际上很多时候图表展现的数据都是从服务器端获取,现在来做一个简单的异步获取json数据的例子. 服务器端用Servlet3.0实现,JSP页面通过jquery异步请求json数据提供给Highchar ...

随机推荐

  1. RBAC权限管理

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联. 简单地说,一个用户拥有若干角色,每一个角色拥有若干权限. 这样,就构造成“用户-角 ...

  2. POJ1742Coins(并不理解是什么意思）

    Coins Time Limit: 3000MS   Memory Limit: 30000K Total Submissions: 32309   Accepted: 10986 Descripti ...

  3. Android开发笔记之《特斯拉-Tesla 代码分析》

    转载请注明出处 一.反编译APK文件,查看包结构 // Android库,不多解释android.support // HttpClient 4.1 repackaged for Android // ...

  4. 【原创】PageAdminCMS 前台SQL注入漏洞（2）

    之前根据公司的要求找了几个web程序的漏洞提交CNVVD,发现漏洞提交上去两个月了,CNVVD却没有任何回应,我提交的这几个漏洞却悄悄的修补掉了. 文章作者:rebeyond 受影响版本:V3.0 漏 ...

  5. JS 工具类

    之前工作用的JavaScript比较多,总结了一下工具类,和大家分享一下,有不足之处还请多多见谅!! 1. 数组工具类(arrayUtils) var arrayUtils = {}; (functi ...

  6. 第二章 Rest框架 Nancy

    正如你看到的,Nancy有两个主要用途. 其中第一项是作为一种通用的基于 REST 框架,可替代 ASP.NET Web API 或其他Rest工具包. 默认情况下,Nancy提供一流的路由和内容协商 ...

  7. yii2 解决POST 400错误

    第一种解决办法是关闭Csrf public function init(){ $this->enableCsrfValidation = false; } 第二种解决办法是在form表单中加入隐 ...

  8. 【postman】postman

    谷歌插件网 http://chromecj.com/utilities/2014-09/181.html

  9. [Windows] win7 配置Java开发环境

    Installed Softwares Git for windows 64 bit Java 7 & 8 64 bit apache maven 3.3.3 Intellij Idea ID ...

  10. cat命令使用

    cat:concatenate files and print on the standard output合并文件并输出 主要用法 1.cat f1.txt,查看f1.txt文件的内容. 2.cat ...