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

Posted 2020-09-30 Deer家的鹿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery初级学习--数据库数据_生成表格相关的知识，希望对你有一定的参考价值。

需要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;
        }
    }

}

以上是关于Jquery初级学习--数据库数据_生成表格的主要内容，如果未能解决你的问题，请参考以下文章

[Java]_[初级]_[使用easyexcel生成或下载Excel文件]

Jquery EasyUI datagrid后台数据表格生成及分页详解

jquery表格行进行编辑如何获取当前的行数据

python学习_day61_登录验证及表格增删改作业

学习计划-----java初级工程师

jQuery_动态表格（简单易懂）