web应用的一些Ajax操作

仅仅列出JQuery部分和一般处理程序部分。web原型就是我的个人任务管理系统

JQuery：

<style type="text/css"> form { text-align: center; } table { width: 1200px; margin: 0 auto; } table thead td { background-color: red; } </style> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> function selectF(id, state, content) { //加载任务 $.get("/getTask.ashx", { id: id, state: state, content: content }, function (data) { $("tbody").empty(); for (var i = 0; i < data.length; i++) { var item = data[i]; var tr = "<tr>"; tr += "<td>" + item.ProjectName + "</td>"; tr += "<td>" + item.TaskPrioriry + "</td>"; tr += "<td>" + item.Content + "</td>"; tr += "<td>" + item.AddTime + "</td>"; tr += "<td>" + item.TaskState + "</td>"; tr += "<td>" + item.FinishedTime + "</td>"; if (item.FinishedTime != "") { tr += "<td><input type='button' value='删除' class='delete' data-id='" + item.TaskID + "'/><input type='button' value='编辑' class='edit' data-id='" + item.TaskID + "'/></td>"; } else { tr += "<td><input type='button' value='完成任务' class='update' data-id='" + item.TaskID + "'/><input type='button' value='删除' class='delete' data-id='" + item.TaskID + "'/><input type='button' value='编辑' class='edit' data-id='" + item.TaskID + "'/></td>"; } tr += "</tr>"; $("tbody").append(tr); } }); } $(function () { //加载项目选项 $.get("/getProject.ashx", function (data) { $("select").empty(); $("select").prepend("<option value='0'>全部项目</option>"); for (var i = 0; i < data.length; i++) { var item = data[i]; $("select").append("<option value='" + item.ProjectID + "'>" + item.ProjectName + "</option>"); } }); selectF(0, 0, ""); $(".delete").live("click", function () { if (confirm("确定删除？")) { var id = $(this).attr("data-id"); $.post("/deleteTask.ashx", { id: id }, function (data) { if (data > 0) { selectF(0, 0, ""); } }); } }); $(".update").live("click", function () { var id = $(this).attr("data-id"); $.post("/updateTask.ashx", { id: id }, function (data) { if (data > 0) { selectF(0, 0, ""); alert("任务完成成功"); } }); }); $("#select").click(function () { var id = $("select").val(); var content = $("#key").val(); var state = $("[name=state]:checked").val(); selectF(id, state, content); }); $("#insert").click(function () { location.href = "AddTask.aspx"; }); $(".edit").live("click", function () { location.href = "AddTask.aspx?id=" + $(this).attr("data-id"); }); }) </script>

一般处理程序：

删除：

public class deleteTask : IHttpHandler { public void ProcessRequest(HttpContext context) { var requset = context.Request; var id = Convert.ToInt32(requset.Form["id"]); var res = TaskManage.Delete(id); context.Response.ContentType = "application/json"; context.Response.Write(res); } public bool IsReusable { get { return false; } } }

获取列表：

public void ProcessRequest(HttpContext context) { var requset = context.Request; var id = Convert.ToInt32(requset.QueryString["id"]); var state = Convert.ToInt32(requset.QueryString["state"]); var content = requset.QueryString["content"]; var table = TaskManage.Select(id, state, content); List<dynamic> list = new List<dynamic>(); foreach (DataRow row in table.Rows) { var data = new { AddTime = Convert.ToDateTime(row["AddTime"]).ToString("yyyy/MM/dd HH:mm:ss"), Content = Convert.ToString(row["Content"]), FinishedTime = row["FinishedTime"] == DBNull.Value ? "" : Convert.ToDateTime(row["FinishedTime"]).ToString("yyyy/MM/dd HH:mm:ss"), ProjectID = Convert.ToInt32(row["ProjectID"]), ProjectName = Convert.ToString(row["ProjectName"]), TaskID = Convert.ToInt32(row["TaskID"]), TaskPrioriry = TaskPrioriry(Convert.ToInt32(row["TaskPrioriry"])), TaskState = Convert.ToInt32(row["TaskState"]) }; list.Add(data); } var ser = new JavaScriptSerializer(); var res = ser.Serialize(list); context.Response.ContentType = "application/json"; context.Response.Write(res); } public bool IsReusable { get { return false; } } }

更新： 

 

public class uodateTask2 : IHttpHandler { public void ProcessRequest(HttpContext context) { var requset = context.Request; var id = Convert.ToInt32(requset.Form["id"]); var res = TaskManage.Update(new Task() { TaskID = id }); context.Response.ContentType = "application/json"; context.Response.Write(res); } public bool IsReusable { get { return false; } } }