<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <style> table{ 500px; border: 1px solid #ccc; border-collapse:collapse; } table td{ border: 1px solid #ccc; padding:5px; } #nav{ 450px; text-align:center; } </style> <script src="js/jquery-3.3.1.js"></script> <script> $(function () { $("#btn").click(function () { var UserName = $("#UserName").val(); $.post("queryHandler.ashx", { "UserName": UserName }, function (data){ //console.log(data); var stu = data.stu; $("#tb").empty(); //如何把data显示在table上？要用DOM for (i = 0; i <stu.length; i++) { var html = "<tr><td>" + stu[i].UserId + "</td><td>" + stu[i].UserName + "</td><td>" + stu[i].Pwd + "</td></tr>"; $("#tb").append(html); } }, "json"); }); }); </script> </head> <body> <div id="nav"> 用户名：<input type="text" name="UserName" id="UserName" /> <input type="button" value="查询" id="btn" /> </div> <table> <thead> <tr> <td>UserId</td> <td>UserName</td> <td>Pwd</td> </tr> </thead> <tbody id="tb"></tbody> </table> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; using System.Data.SqlClient; using System.Configuration; namespace AJAX { /// <summary> /// queryHandler 的摘要说明 /// </summary> public class queryHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string UserName = context.Request["UserName"]; string sql = "select UserId,UserName,Pwd from Users where UserName like '%"+@UserName+"%'"; SqlParameter p = new SqlParameter("@UserName",UserName); DataTable dt= SQLHelper.ExecuteDataTable(sql, p); var stu = "{"stu":["; for(int i=0; i < dt.Rows.Count; i++) { stu +="{ "UserId":""+dt.Rows[i]["UserId"] + "" ,"UserName":"" + dt.Rows[i]["UserName"] + "", "Pwd":"" + dt.Rows[i]["Pwd"] + ""}"; //最后一次循环不需要加逗号 if (i!= dt.Rows.Count - 1) { stu += ","; } } stu += "]}"; context.Response.Write(stu); } public bool IsReusable { get { return false; } } } }