通过异步获取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. 浅谈:javascript的面向对象编程之具体实现

    下面的javascript代码都是需要使用jQuery插件来做的.希望大家可以搭建好工作环境 首先我们来做一个练习:在一个删除的超链接中添加一个提示信息,提示是否确认删除. 一般情况下我们都会这么做 ...

  2. django创建新项目anministrator问题

    1.app中models的class可以通过migrations命令生成相应的数据表 2.此时并未写入数据库,migrate命令可以把相应的改动更新到数据库中 3.createsuperuser命令创 ...

  3. 如何解决Maven和SBT下载Jar包太慢

    国内:如何解决Maven和SBT下载Jar包太慢 Maven 远程仓库 <mirror> <id>ui</id> <mirrorOf>central&l ...

  4. linux指令学习笔记（一）

    1. 查看目录下有什么文件/目录    > ls            //list列出目录的文件信息    > ls  -l 或ll   //list -list以“详细信息”查看目录文 ...

  5. NOSDK--一键打包的实现（五）

    1.5 mac下的脚本环境配置及脚本的使用 脚本环境主要依赖sdk,ndk和ant,前两个可以在android官方网站下载(被墙了的话只能FQ了). android-sdk-macosx androi ...

  6. iOS 打开本地 其他应用程序（URL Types）

    iOS 打开本地其他应用程序(URL Types) /*前言废话:Xcode是神奇的,是我所见到的编译器中最为神奇的,如:它可以同时运行两个甚至更多Project到我们模拟器上,可以同时使用一个模拟器 ...

  7. java从基础知识（十）java多线程（下）

    首先介绍可见性.原子性.有序性.重排序这几个概念 原子性:即一个操作或多个操作要么全部执行并且执行的过程不会被任何因素打断,要么都不执行. 可见性:一个线程对共享变量值的修改,能够及时地被其它线程看到 ...

  8. [COJ2201][KOJ0223][KOJ0250]花园

    [KOJ0223][KOJ0250]花园 试题描述 小奇的花园有n个温室,标号为1到n,温室以及以及温室间的双向道路形成一棵树. 每个温室都种植着一种花,随着季节的变换,温室里的花的种类也在不断发生着 ...

  9. (转)android 蓝牙通信编程

    转自:http://blog.csdn.net/pwei007/article/details/6015907 Android平台支持蓝牙网络协议栈,实现蓝牙设备之间数据的无线传输. 本文档描述了怎样 ...

  10. 服务端调用dubbo的方式

    方式1.通过dubbo 方式2.通过spring applicationContext-dubbo.xml 注意引入提供方的接口jar包