AJAX增删查改------前台事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX增删查改------前台事件相关的知识，希望对你有一定的参考价值。
//创建js序列化对象
System.Web.Script.Serialization.javascriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
//将数据序列化成JSON字符串。匿名类。 string str = js.Serialize(new { UList = list, MyPageBar = pageBar });
getMonth() 方法从0月份开始——11月份结束
//序列化json格式后日期(毫秒数)转成日期格式
//parseInt() 函数可解析一个字符串，并返回一个整数。
1 function ChangeDateFormat(cellval) { 2 var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10)); 3 var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; 4 var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); 5 return date.getFullYear() + "-" + month + "-" + currentDate; 6 }
注意:一定要表格所有的数据加载完成了，才能给表格中的超链接添加单击事件
1 $(".deletes").click(function () { 2 $.messager.confirm("删除提示", "你确定要删除该记录吗?", function (r) { 3 if (r) {//如果该条件成立，表示用户单击了"确定"按钮 4 $.post("DeleteUser.ashx", { "id": id }, function (data) { 5 if (data == "ok") { 6 $.messager.show({ 7 title: ‘提示‘, 8 msg: ‘删除成功‘, 9 showType: ‘show‘ 10 }); 11 } else { 12 $.messager.alert("提示","删除失败!!","error"); 13 } 14 }); 15 } 16 }); 17 });
1 <link href="../Css/tableStyle.css" rel="stylesheet" /> 2 <link href="../Css/themes/default/easyui.css" rel="stylesheet" /> 3 <link href="../Css/pageBarStyle.css" rel="stylesheet" /> 4 <link href="../Css/themes/icon.css" rel="stylesheet" /> 5 <script src="../Js/jquery-1.7.1.js"></script> 6 <script src="../Js/jquery.easyui.min.js"></script> 7 <script src="../Js/easyui-lang-zh_CN.js"></script>
1 $(function () { 2 //隐藏详细页 3 $("#detailDiv").css("display", "none"); 4 //隐藏增加用户 5 $("#addUserDiv").css("display", "none"); 6 //隐藏修改用户 7 $("#editUserDiv").css("display", "none"); 8 //$("#dlg").dialog(‘close‘); 9 loadUserInfo(1); 10 //添加增加用户单击事件 11 $("#addUserInfo").click(function () { 12 //加载用户方法--展示添加用户数据表单 13 bindAddClick(); 14 }); 15 16 });
1 function bindAddClick() { 2 //显示添加用户 3 $("#addUserDiv").css("display", "block"); 4 //设置对话框事件 5 $(‘#addUserDiv‘).dialog({ 6 width: 300, 7 height: 300, 8 title: "添加用户信息", 9 collapsible: true, 10 maximizable: true, 11 resizable: true, 12 modal: true, 13 buttons: [{ 14 text: ‘Ok‘, 15 iconCls: ‘icon-ok‘, 16 handler: function () { 17 //获取用户在添加表单中输入的数据，然后同AJAX发送服务端。 18 //完成用户添加方法 19 addUser(); 20 } 21 }, { 22 text: ‘Cancel‘, 23 handler: function () { 24 //设置对话框关闭事件 25 $(‘#addUserDiv‘).dialog(‘close‘); 26 } 27 }] 28 }); 29 }
1 function addUser() { 2 //获取用户在添加表单中输入的数据 3 //JQ封装的一个方法serializeArray() 每个表单元素输的数据返回json 4 var pars = $("#addUserForm").serializeArray();//{"txtUserName":"zhangsan",} 5 $.post("AddUserInfo.ashx", pars, function (data) { 6 if (data == "ok") {//用户点‘ok‘ 7 //清除添加表单中输入的数据 8 $("#addUserForm input").val(""); 9 //关闭添加窗口 10 $(‘#addUserDiv‘).dialog(‘close‘); 11 //删除表格旧数据 12 $("#tabList tr:gt(0)").remove(); 13 //重新给表格添加数据 14 loadUserInfo(); 15 } else {//服务器返回"no" 16 $.messager.alert("提示","添加失败","error"); 17 } 18 }); 19 }
1 <!----------------添加用户按钮-------------------> 2 <a href="javascript:void(0)" id="addUserInfo">添加用户</a> 3 <!----------------添加用户信息-------------------> 4 5 <div id="addUserDiv"> 6 <form id="addUserForm"> 7 <table> 8 <tr><td>用户名</td><td><input type="text" name="txtUserName"/></td></tr> 9 <tr><td>密码</td><td><input type="password" name="txtUserPwd"/></td></tr> 10 <tr><td>邮箱</td><td><input type="text" name="txtUserMail"/></td></tr> 11 </table> 12 </form> 13 </div>
1 function bindDeleteClick() { 2 //设置删除按钮单击事件 3 $(".deletes").click(function () { 4 //获得删除按钮dld属性-用户id 5 var id = $(this).attr("dId"); 6 $.messager.confirm("删除提示", "你确定要删除该记录吗?", function (r) { 7 if (r) {//如果该条件成立，表示用户单击了"确定"按钮 8 //提交到服务器进行删除 9 $.post("DeleteUser.ashx", { "id": id }, function (data) { 10 //服务器返回Ok 11 if (data == "ok") { 12 //清除表格中原有的数据 13 $("#tabList tr:gt(0)").remove(); 14 //将新数据加载到表格上。 15 loadUserInfo(); 16 $.messager.show({ 17 title: ‘提示‘, 18 msg: ‘删除成功‘, 19 showType: ‘show‘ 20 }); 21 22 } else { 23 $.messager.alert("提示","删除失败!!","error"); 24 } 25 26 }); 27 } 28 }); 29 }); 30 }
1 function bindDetailClick() { 2 //给详细按钮添加单击事件 3 $(".details").click(function () { 4 //获取nld属性-用户id 5 var id = $(this).attr("nId"); 6 //ajax提交id到服务器 7 $.post("ShowDetail.ashx", { "id": id }, function (data) { 8 var serverData = $.parseJSON(data); 9 //拿到的json依次赋给文本框 10 $("#userName").text(serverData.UserName); 11 $("#userPwd").text(serverData.UserPass); 12 $("#userMail").text(serverData.Email); 13 //显示详细div 14 $("#detailDiv").css("display", "block"); 15 //设置detail对话框 16 $(‘#detailDiv‘).dialog({ 17 width: 300, 18 height: 300, 19 title: "用户详细信息", 20 collapsible: true, 21 maximizable: true, 22 resizable: true, 23 modal:true, 24 buttons:[{ 25 text:‘Ok‘, 26 iconCls:‘icon-ok‘, 27 handler:function(){ 28 alert(‘ok‘); 29 } 30 },{ 31 text:‘Cancel‘, 32 handler:function(){ 33 $(‘#detailDiv‘).dialog(‘close‘); 34 } 35 }] 36 }); 37 38 }); 39 }); 40 }
1 <!------------详细信息------------------> 2 <div id="detailDiv"> 3 <table> 4 <tr> 5 <td>用户名</td><td><span id="userName"></span></td> 6 </tr> 7 <tr> 8 <td>密码</td><td><span id="userPwd"></span></td> 9 </tr> 10 <tr> 11 <td>邮箱</td><td><span id="userMail"></span></td> 12 </tr> 13 </table> 14 </div>
1 function bindEditClick() { 2 //先编辑按钮绑定事件 3 $(".edits").click(function () { 4 //设置获取eld属性-用户id 5 var id = $(this).attr("eId"); 6 //提交id到服务器 7 $.post("ShowDetail.ashx", { "id": id }, function (data) { 8 //将服务器返回的字符串 通过jq方法处理成Json 9 var serverData = jQuery.parseJSON(data); 10 //绑定数据到文本框 11 $("#editUserId").val(serverData.Id); 12 $("#eidUserName").val(serverData.UserName); 13 $("#editUserPwd").val(serverData.UserPass); 14 $("#editUserMail").val(serverData.Email); 15 $("#editRegTime").val(ChangeDateFormat(serverData.RegTime)); 16 //显示Div 17 $("#editUserDiv").css("display", "block"); 18 //弹出对话框 19 $(‘#editUserDiv‘).dialog({ 20 width: 300, 21 height: 300, 22 title: "修改用户信息", 23 collapsible: true, 24 maximizable: true, 25 resizable: true, 26 modal: true, 27 buttons: [{ 28 text: ‘Ok‘, 29 iconCls: ‘icon-ok‘, 30 handler: function () { 31 //完成数据更新 32 editUserInfo(); 33 } 34 }, { 35 text: ‘Cancel‘, 36 handler: function () { 37 $(‘#editUserDiv‘).dialog(‘close‘); 38 } 39 }] 40 }); 41 }); 42 }); 43 }
1 function editUserInfo() { 2 //序列化表单元素（类似 .serialize() 方法），返回 JSON 数据结构数据。 3 var pars = $("#editUserForm").serializeArray(); 4 //提交pars到服务器 5 $.post("EditUserInfo.ashx", pars, function (data) { 6 if (data == "yes") { 7 //关闭添加窗口 8 $(‘#editUserDiv‘).dialog(‘close‘); 9 10 //删除表格旧数据 11 $("#tabList tr:gt(0)").remove(); 12 //重新给表格添加数据 13 loadUserInfo(); 14 } else { 15 $.messager.alert("提示", "修改失败", "error"); 16 } 17 }); 18 }
1 <!-------------------编辑用户的数据---------------------> 2 <div id="editUserDiv"> 3 <form id="editUserForm"> 4 <!--隐藏域--> 5 <input type="hidden" name="txtEditUserId" id="editUserId" /> 6 <input type="hidden" name="txtEditRegTime" id="editRegTime" /> 7 <table> 8 <tr><td>用户名</td><td><input type="text" name="txtEditUserName" id="eidUserName"/></td></tr> 9 <tr><td>密码</td><td><input type="text" name="txtEditUserPwd" id="editUserPwd"/></td></tr> 10 <tr><td>邮箱</td><td><input type="text" name="txtEditUserMail" id="editUserMail"/></td></tr> 11 </table> 12 </form> 13 </div>
1 //pageIndex当前页码 2 function loadUserInfo(pageIndex) { 3 $.post("UserList.ashx", {"pageIndex":pageIndex}, function (data) { 4 var serverData = $.parseJSON(data); 5 var serverDataLength = serverData.UList.length; 6 for (var i = 0; i < serverDataLength; i++) { 7 $("<tr><td>" + serverData.UList[i].Id + "</td><td>" + serverData.UList[i].UserName + "</td><td>" + serverData.UList[i].UserPass + "</td><td>" + serverData.UList[i].Email + "</td><td>" + ChangeDateFormat(serverData.UList[i].RegTime) + "</td><td><a href=‘javascript:void(0)‘ class=‘deletes‘ dId=‘" + serverData.UList[i].Id + "‘>删除</a></td><td><a href=‘javascript:void(0)‘ class=‘details‘ nId=‘" + serverData.UList[i].Id + "‘>详细</a></td><td><a href=‘javascript:void(0)‘ class=‘edits‘ eId=‘" + serverData.UList[i].Id + "‘>编辑</a></td></tr>").appendTo("#tabList"); 8 } 9 //将页码条加到DIV上。 10 $("#pageBarDiv").html(serverData.MyPageBar); 11 bindMyPageBarClick();//给数字页码加单击事件 12 bindDetailClick();//注意：一定要表格中所有的数据加载完成了，才能给表格中的超链接加单击事件。 13 bindDeleteClick();//删除 14 bindEditClick();//编辑 15 }); 16 }
1 function bindMyPageBarClick() { 2 $(".myPageBar").click(function () { 3 // //this指a标签 拿到href属性 按“=”分割 拿到页码 4 5 var pageIndex = $(this).attr(‘href‘).split(‘=‘)[1]; 6 //大于0行清空 7 $("#tabList tr:gt(0)").remove(); 8 //重新加载页面 9 10 loadUserInfo(pageIndex); 11 return false;//a标签默认事件,页面不发生跳转，执行后还是在页面的当前位置 不用在执行超链接。 12 }); 13 }
1 <table id="tabList"> 2 <tr><th>编号</th><th>用户名</th><th>密码</th><th>邮箱</th><th>时间</th><th>删除</th><th>详细</th><th>编辑</th></tr> 3 4 </table> 5 <!--页码条--> 6 <div id="pageBarDiv" class="page_nav"></div>
以上是关于AJAX增删查改------前台事件的主要内容，如果未能解决你的问题，请参考以下文章