Jquery初级学习--数据库数据_生成表格

最新推荐文章于 2024-11-12 20:35:48 发布

diplomat1218

最新推荐文章于 2024-11-12 20:35:48 发布

阅读量91

点赞数

文章标签：数据库 javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/Deerjiadelu/p/7267679.html

版权

本文介绍如何使用ASP.NET和jQuery实现网页表格的数据动态加载功能，通过Handler.ashx处理请求，从userInfo表中获取数据，并使用Newtonsoft.Json进行序列化，再通过AJAX调用将数据填充到网页表格中。

摘要由CSDN通过智能技术生成

需要Newtonsoft.Json.dll插件

TableShow.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TableShow.aspx.cs" Inherits="TableShow" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <style type="text/css">
        #TB
        {
            width: 186px;
            height: 54px;
        }
        .style1
        {
            height: 26px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    
    <div>
        <table id="TB" align="center" border="1" bordercolor="#0099CC">
            <tr>
                <th class="style1">
                    工号
                </th>
                <th class="style1">
                    用户名
                </th>
                <th class="style1">
                    密码
                </th>
                <th class="style1">
                    角色
                </th>
            </tr>
        </table>
    </div>
    <div>
    <center>
        <button type="button">
            Click me</button>
            </center>
    </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                
                $.ajax({
                    type: "post",
                    url: "Handler.ashx",
                    data: {},
                    success: function (result) {
                        var items = eval(result);
                        var content = "";
                        for (var i = 0; i < items.length; i++) {
                            content = $("<tr><td>" + items[i].userid + "</td><td>" + items[i].username + "</td><td>" + items[i].password + "</td><td>" + items[i].role + "</td></tr>");
                            $("#TB tbody").append(content);
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>

Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
using System.Data;


public class Handler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        DB db = new DB();
        DataTable dt = db.reDt("select userid,username,password,role from userInfo");
        string result = JsonConvert.SerializeObject(dt, new DataTableConverter());
        context.Response.Write(result);
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}