首先引用两个文件一个dll:
数据库表已创建
首先编写数据读取部分
/// <summary> /// 查询 /// </summary> /// <param name="username"></param> /// <returns></returns> private DataTable GetDataTable(string username) { sql = @"select *from Fct_User where [UserName] like'%" + username + "%' order by UserName"; return db.ExecuteQuery(sql); } /// <summary> /// 新增 /// </summary> /// <param name="username"></param> /// <param name="pwd"></param> /// <param name="note"></param> /// <returns></returns> private string AddData(string username,string pwd,string note, out int num) { string userid = Guid.NewGuid().ToString(); sql = @"insert into[Fct_User]([UserID],[UserName],[PassWord],[Note])values('" + userid + "','" + username + "','" + pwd + "','" + note + "')"; num= db.ExecuteNonQuery(sql); return userid; } /// <summary> /// 修改 /// </summary> /// <param name="userid"></param> /// <param name="username"></param> /// <param name="pwd"></param> /// <param name="note"></param> /// <returns></returns> private int UpData(string userid, string username, string pwd, string note) { sql = @"update Fct_User set[UserName]='" + username + "' ,[PassWord]='" + pwd + "' ,[Note]='" + note + "' where UserID='" + userid + "' "; return db.ExecuteNonQuery(sql); } /// <summary> /// 删除 /// </summary> /// <param name="userid"></param> /// <returns></returns> private int DeleteData(string userid) { sql = @"delete Fct_User where UserID='" + userid + "'"; return db.ExecuteNonQuery(sql); } public bool IsReusable { get { return false; } } } }
其次编写调用:
using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using DALBase; namespace MyTest { /// <summary> /// IndexHandler 的摘要说明 /// </summary> public class IndexHandler : IHttpHandler { protected DBAccess db=DBConnection.CreateDB(1); public string sql = ""; public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; try { string userid = "", username = "", pwd = "", note = "", json=""; if (context.Request.Form["userid"] != null) userid = context.Request.Form["userid"].ToString(); if(context.Request.Form["UserName"]!=null) username=context.Request.Form["UserName"].ToString(); if (context.Request.Form["pwd"] != null) pwd = context.Request.Form["pwd"].ToString(); if (context.Request.Form["note"] != null) note = context.Request.Form["note"].ToString(); string method = context.Request.Params["Type"].ToString(); switch (method) { case "GetDataTable": json = "[]"; DataTable dt = GetDataTable(username); json = DataTableToJson.ToJson(dt); break; case "AddData": int num=0; userid = AddData(username, pwd, note,out num).ToString(); json = "{\"num\":\"" + num + "\",\"userid\":\"" + userid + "\"}"; break; case "UpData": json = UpData(userid, username, pwd, note).ToString(); break; case "DeleteData": json = DeleteData(userid).ToString(); break; default: break; } context.Response.Write(json); } catch (Exception e) { context.Response.Write(e.ToString()); } //context.Response.Write("Hello World"); }
然后创建html页面结构
<!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="js/jquery-1.10.2.js"></script> </head> <body> <table style="border-right: silver 1px; border-top: silver 1px; border-left: silver 1px; border-bottom: silver 1px; border-collapse: collapse; background-color: white" bordercolor="silver" cellspacing="0" cellpadding="4" rules="all" width="1000px" border="1"> <tr> <td style="width:100px;"> 用户名 </td> <td> <input type="text" id="userName" /> </td> </tr> <tr> <td colspan="2" align="center"> <input type="button" id="Query" value="查询" onclick="QueryData()" /> <input type="button" id="Add" value="新增" onclick="AddData()" /> </td> </tr> </table> <table style="border-right: silver 1px; border-top: silver 1px; border-left: silver 1px; border-bottom: silver 1px; border-collapse: collapse; background-color: white" bordercolor="silver" cellspacing="0" cellpadding="4" rules="all" width="1000px" border="1"> <tr> <th style="width: 100px;"> 操作 </th> <th> 用户名 </th> <th> 密码 </th> <th> 备注 </th> </tr> <tbody id="UserData"></tbody> </table> </body> </html>
最后写JavaScript
<script type="text/javascript"> function QueryData() { $("#UserData").html(''); $.ajax({ type: "POST", dataType: "JSON", //cache: false, //naync: false, url: "IndexHandler.ashx?Type=GetDataTable", data: { "UserName": $("#userName").val() }, success: function (data) { $.each(data, function (index, item) { var html = '<tr><td><input type="button" data-code="' + item.UserID + '" value="更新" onclick="UpdateData(this)" />'; html += '<input type="button" data-code="' + item.UserID + '" value="删除" onclick="DeleteData(this)" /></td>'; html += '<td>' + item.UserName + '</td>'; html += '<td>' + item.PassWord + '</td>'; html += '<td>' + item.Note + '</td></tr>'; $("#UserData").append(html); }) } }); } function AddData() { var newRow = '<tr><td><input type="button" value="保存" onclick="SaveAddData(this)" /></td>'; newRow += '<td><input type="text" id="txtusername" /></td><td><input type="text" id="txtpwd" /></td><td><input type="text" id="txtnote" /></td>' if ($("#UserData").html() != "") { $("#UserData tr").eq(0).0(newRow); } else { $("#UserData").append(newRow) } } function SaveAddData(e) { var username = $(e).parent().parent().find("td").find("#txtusername").val(); var pwd = $(e).parent().parent().find("td").find("#txtpwd").val(); var note = $(e).parent().parent().find("td").find("#txtnote").val(); $.ajax({ type: "POST", dataType: "JSON", //cache: false, //naync: false, url: "IndexHandler.ashx?Type=AddData", data: { "UserName": username, "pwd": pwd, "note": note }, success: function (data) { debugger; if (parseInt($.trim(data.num)) > 0) { alert("添加成功!"); userid = data.userid; username = $(e).parent().parent().find("td").find("#txtusername").val(); pwd = $(e).parent().parent().find("td").find("#txtpwd").val(); note = $(e).parent().parent().find("td").find("#txtnote").val(); var upRow = '<td><input type="button" data-code="' + userid + '" value="更新" onclick="UpdateData(this)" />'; upRow += '<input type="button" data-code="' + userid + '" value=" 删除" onclick="DeleteData(this)" /></td>'; upRow += '<td>' + username + '</td><td>' + pwd + '</td><td>' + note + '</td>' $(e).parent().parent().html(upRow); } else { alert("添加失败!"); } } }); } function UpdateData(e) { var userid = $(e).data("code"); var username = $(e).parent().parent().find("td").eq(1).html(); var pwd = $(e).parent().parent().find("td").eq(2).html(); var note = $(e).parent().parent().find("td").eq(3).html(); var upRow = '<td><input type="button" data-code="' + userid + '" value="取消" onclick="ResUpdateData(this)" />'; upRow += '<input type="button" data-code="' + userid + '" value=" 保存" onclick="SaveUpdateData(this)" /></td>'; upRow += '<td><input type="text" id="txtusername" value="' + username + '" /></td><td><input type="text" value="' + pwd + '" id="txtpwd" /></td><td><input value="' + note + '" type="text" id="txtnote" /></td>' $(e).parent().parent().html(upRow); } function SaveUpdateData(e) { debugger; var userid = $(e).data("code"); var username = $(e).parent().parent().find("td").find("#txtusername").val(); var pwd = $(e).parent().parent().find("td").find("#txtpwd").val(); var note = $(e).parent().parent().find("td").find("#txtnote").val(); $.ajax({ type: "POST", dataType: "JSON", //cache: false, //naync: false, url: "IndexHandler.ashx?Type=UpData", data: { "userid": userid, "UserName": username, "pwd": pwd, "note": note }, success: function (num) { if (parseInt($.trim(num)) > 0) { alert("修改成功!"); userid = $(e).data("code"); username = $(e).parent().parent().find("td").find("#txtusername").val(); pwd = $(e).parent().parent().find("td").find("#txtpwd").val(); note = $(e).parent().parent().find("td").find("#txtnote").val(); upRow = '<td><input type="button" data-code="' + userid + '" value="更新" onclick="UpdateData(this)" />'; upRow += '<input type="button" data-code="' + userid + '" value=" 删除" onclick="DeleteData(this)" /></td>'; upRow += '<td>' + username + '</td><td>' + pwd + '</td><td>' + note + '</td>' $(e).parent().parent().html(upRow); } else { alert("修改失败!"); } } }); } function ResUpdateData(e) { var userid = $(e).data("code"); var username = $(e).parent().parent().find("td").find("#txtusername").val(); var pwd = $(e).parent().parent().find("td").find("#txtpwd").val(); var note = $(e).parent().parent().find("td").find("#txtnote").val(); var upRow = '<td><input type="button" data-code="' + userid + '" value="更新" onclick="UpdateData(this)" />'; upRow += '<input type="button" data-code="' + userid + '" value=" 删除" onclick="DeleteData(this)" /></td>'; upRow += '<td>' + username + '</td><td>' + pwd + '</td><td>' + note + '</td>' $(e).parent().parent().html(upRow); } function DeleteData(e) { var userid = $(e).data("code"); $.ajax({ type: "POST", dataType: "JSON", //cache: false, //naync: false, url: "IndexHandler.ashx?Type=DeleteData", data: { "userid": userid}, success: function (num) { if (parseInt($.trim(num)) > 0) { alert("删除成功!"); $(e).parent().parent().html(''); } else { alert("删除失败!"); } } }); } </script>
效果图
通过练习此项目可以对ajax的运用更加熟练
jQuery :遍历JSON数据 $.each(data,function(index,item){});
获取指定行td的值:$(this).parent().Parent().find(td).eq(1).html();
添加table行:$("#UserData tr").eq(0).beford(newrow);
JQuery函数:$.trim(' ad')