通过异步获取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. IOS-Hybrid（混合开发）

    http://www.cnblogs.com/oc-bowen/p/5423902.html 1.1.     APP三种开发模式 智能手机之普及不用多说,手机APP渗投到各个行业:电商(淘宝.京东等 ...

  2. Linux虚拟机中配置JDK环境变量

    前提准备: 1,安装好Linux系统 2,下载好可以将文件传输到Linux系统工具例如:WinSCP 3,在windows中下载Linux版JDK: http://download.oracle.co ...

  3. DataGridView实现各种效果

    http://www.cnblogs.com/greatverve/archive/2012/03/05/multi-datagridview.html

  4. Standard C 语言标准函数库介绍

    全面巩固所知所学,往精通方向迈进! Standard C 语言标准函数库速查 (Cheat Sheet) from:http://ganquan.info/standard-c/function/ C ...

  5. Solved: “Cannot execute a program. The command being executed was \roslyn\csc.exe”

    When you publish your ASP.NET project to a hosting account such as GoDaddy, you may run into the iss ...

  6. c# Json 自定义类作为字典键时，序列化和反序列化的处理方法

    一般情况下,Newtonsoft.Json.dll 对 Dictionary<int,object>.Dictionary<string,object>等序列化与反序列化都是成 ...

  7. Linux C++中的时间函数（转）

    http://net.pku.edu.cn/~yhf/linux_c/function/03.html   asctime(将时间和日期以字符串格式表示) 相关函数 time,ctime,gmtime ...

  8. Session 潜在bug防范

    注意: Session的使用一定要及时的清理,因为它是“全局”的(包括其生命周期),所以在使用Session保存状态时,不用时要及时的NULL掉,小心潜在的Bug.

  9. nio

    1.I/O 输入输出流 (1) 指的是计算机与外界,或者程序与计算机之间数据交换的接口. (2) 在java编程中,使用 流(Stream) 的方式完成I/O , 所有的I/O都被视为单个字节的移动. ...

  10. 高程三：Array

    一:Array数组 1.Array.isArray(参数) 检测是否是数组,*不兼容IE8,兼容IE9及以上.Chrome.Firefox等,要兼容IE8,可以用 Object.prototype.t ...