案例(用封装的ajax加载数据库的数据到页面)

时间：2023-03-09 19:14:14
案例(用封装的ajax加载数据库的数据到页面)

本程序主要功能是以表格方式在网页上显示数据库的内容

LoadUsers.htm代码：

<head>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script src="MyAjax.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            MyAjax("LoadUsers.ashx",

            function (resTxt) {

                var users = resTxt.split("|");

                for (var i = 0; i < users.length; i++) {

                    var user = users[i];

                    var fileds = user.split(",");

                    var id = fileds[0];

                    var name = fileds[1];

                    var password = fileds[2];

                    $("#tbody1").append("<tr><td>" + id + "</td><td>" +

                    name + "</td><td>" + password + "</td></tr>");

                }

            },

            function (status) {

                alert("加载数据错误");

            });

        });

    </script>

</head>

<body>

    <table border="1" cellpadding="0" cellspacing="0">

        <thead>

            <tr>

                <th>id</th>

                <th>name</th>

                <th>password</th>

            </tr>

        </thead>

        <tbody id="tbody1" align="center">

        </tbody>

    </table>

</body>

LoadUsers.adhx代码：

public void ProcessRequest(HttpContext context)

{

    context.Response.ContentType = "text/plain";

    List<string> list = new List<string>();

    DataTable table = SQLHelper.ExecuteReader("select * from Users");

    foreach (DataRow row in table.Rows)

    {

        list.Add(row["id"] + "," + row["name"] + "," + row["password"]);

    }

    string str = string.Join("|",list);//1,admin,123|2,bbb,123|3,aaa,123

    context.Response.Write(str);

}

相关文章