通过异步获取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. Windows bat脚本学习（1）

    基础 首先所有命令在cmd命令行中都能找到说明: 例如 想知道type用法 输入type /? 其他命令都一样 type [drive:][path] filename 显示文本文件内容 虽然有点鸡肋 ...

  2. 网站中使用echart

    在网站开发中,可能会使用折线图,圆饼图,等等 来丰富网页对数据的展示,可以使用echart http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E ...

  3. JQuery------分页插件下载地址

    转载GitHub: https://github.com/pgkk/kkpager

  4. [Unreal]学习笔记之灯光说明

    利用灯光通道,实现局部照亮效果 没有更改Channel之前的效果: 需要将网格物体设置为可移动 将灯光和被照亮物体的Channel设置为同样并且非0零: 设置成功后,就可以实现局部照亮

  5. easyUI的combobox是否可用

    $('#ID').combobox('enable'); $('#ID').combobox('disable');

  6. asp.net mvc使用log4gNetz

    1. 下载安装log4gNet 2. 将 \bin\net\4.0\release\log4net.dll 复制到你的项目中 . 3. 将log4net.dll 添加引用到你的项目中. 4. 添加如下 ...

  7. 小明的密码-初级DP解法

    #include #include #include using namespace std; int visited[5][20][9009];// 访问情况 int dp[5][20][9009] ...

  8. 【Unity3d】火炬之光的X射线效果

    http://www.cnblogs.com/dosomething/archive/2012/04/03/2431149.html 人物和摄像机之间存在例如墙壁等的阻挡时  可以修改阻挡材质的alp ...

  9. html5 历史管理onhashchange和state

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. http://blog.csdn.net/java2000_wl/article/details/8627874

    http://blog.csdn.net/java2000_wl/article/details/8627874