通过异步获取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. linux下cetos7无线网络设置办法

    首先检查是否安装了networkmanger wifi.RPM 检查方法,终端输入rpm一qa 如果不存在,利用rpm一ivh 文件名 进行安装,并且重启

  2. POJ 2253 Frogger（Dijkstra)

    传送门 Frogger Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 39453   Accepted: 12691 Des ...

  3. View绘制机制

    View 绘制机制 1. View 树的绘图流程 当 Activity 接收到焦点的时候,它会被请求绘制布局,该请求由 Android framework 处理.绘制是从根节点开始,对布局树进行 me ...

  4. 报错：emulator: WARNING: ./android/metrics/metrics_reporter_toolbar.cpp:167: Can't upload usage metrics: Error

  5. Eclipse Android环境搭建

    1.先安装ADT,记得断开网络2.然后关闭Eclipse安装SDK,例如安装在C:\Users\Administrator\AppData\Local\Android\android-sdk3.重启E ...

  6. zabbix3配置短信报警

    需求:在zabbix服务器配置短信报警,当服务出现故障达到预警级别是通过发送短信的形式告诉运维人员,以便及时处理. 一.zabbix服务器端配置短信脚本 我的短信脚本放置位置为 /etc/zabbix ...

  7. 室内定位系列（一）——WiFi位置指纹（译）

    原文:<Advanced Location-Based Technologies and Services>--chapter 2 WiFi Location Fingerprint 作者 ...

  8. sql注入的基本防范手段

    基本的sql注入防御手段,概括来讲就是权限控制和关键词过滤. 防御sql注入 ============================================================= ...

  9. 用Model-View-ViewModel构建iOS App

    如果你已经开发一段时间的iOS应用,你一定听说过Model-View-Controller,即MVC.MVC是构建iOS App的标准模式.然而,最近我已经越来越厌倦MVC的一些缺点.在本文,我将重温 ...

  10. 【转】使用SQL Tuning Advisor STA优化SQL

    SQL优化器(SQL Tuning Advisor STA)是Oracle10g中推出的帮助DBA优化工具,它的特点是简单.智能,DBA值需要调用函数就可以给出一个性能很差的语句的优化结果.下面介绍一 ...