ajax实现增删改查的一个实例

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了ajax实现增删改查的一个实例，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

//注悉：点击保存按钮时自动获取未发卡员工的Id无刷新异步保存卡号Id与卡号并且该员工资料被隐藏；已发卡表就显示该员工资料；如果想从第N位开始发卡，操作前必须把N-1以及其前的所有员工资料都客户端删除（此删除只是客户端隐藏display='none'，操作跟后台无关，当然数据库的数据不变）；才可以正常保存第N位员工发卡；（系统默认从未发卡员工表第一位员工开始发卡）；这个功能让哥很头疼；研究了整整两天才搞定；如果是选择CheckBox对应的发卡的话，哥一两个钟整个流程就可以搞定了；

<%@Page Language="C#" AutoEventWireup="true"CodeBehind="ME_MembersCardNo_Add.aspx.cs"Inherits="Front.Member.ME_MembersCardNo_Add" %>

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1"runat="server">

<title></title>

<link href="../CSS/style.css" rel="stylesheet" type="text/css" />

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

<script src="../Scripts/Members/Commom.js" type="text/javascript"></script>

<script src="../Scripts/Members/ME_Members_Add.js"type="text/javascript"></script>

<script src="../Scripts/Members/ME_MembersNo.js"type="text/javascript"></script>

　 <script type="text/javascript">

　　

//-----------------------------AJAX实现非执业注师无刷新发卡

// $(function () {

//$("input[isRemoveRow='true']").click(function () {

// var Id =$(this).attr("curId");

// if (confirm("真的要删除吗？")) {

//$.post("HandlerDel.ashx",{ "Id": Id },function(data,status) {

// if (status =="success") {

// alert("删除成功！");

// }

// });

// $("input[curId='"+ Id + "']").parent().parent().remove(); //AJAX删除input→td→tr,parent()指当前Id所在位置的父亲td，也就是要删除tr的话，就要删除当前Id所在input的父亲td的父亲tr；

// }

// });

// });

//动态删除选中的行

@H_333_404@function delTableRowNo() {

@H_333_404@varinputs = document.getElementsByTagName("input");

@H_333_404@varlen = inputs.length;

@H_333_404@for(@H_333_404@vari = 0; i <len; i++) {

@H_333_404@ if ("checkBox" == inputs[i].type) {

@H_333_404@if (inputs[i].checked) {

@H_333_404@if (inputs[i].id != "checkAll")

document.getElementById(inputs[i].title).style.display= "none";//被选中的CheckBox客户端隐藏

//document.getElementById(inputs[i].title).style

}

}

}

@H_333_404@returnfalse;

}

//点击保存按钮是触发的javascript方法

@H_333_404@function AddTableRowNo() {

@H_333_404@varrowindex = 0;

@H_333_404@vari = 0;

@H_333_404@varCarId = document.getElementById("txtMembersCardId").value;

@H_333_404@varCarNo = document.getElementById("txtMembersCard").value;

@H_333_404@if(CarId == ""){

alert("会员编号Id不能为空");

@H_333_404@ return;

}

@H_333_404@if(CarNo == ""){

alert("会员卡号不能为空");

@H_333_404@ return;

}

// var IsCardTable =document.getElementById("IsCardTable");

@H_333_404@varinputs = document.getElementsByTagName("input");

@H_333_404@varinputLen = inputs.length;

　 //当遍历到checkBox的style.display不等于none时，取得该checkBox的Id就跳出for循环

@H_333_404@for(i = 0; i <inputLen; i++) {

@H_333_404@ if ("checkBox" == inputs[i].type) {

@H_333_404@if ("checkAll" != inputs[i].id) {

@H_333_404@if (document.getElementById(inputs[i].title).style.display!= "none"){

rowindex = inputs[i].id;

@H_333_404@break;

}

}

}

}

//AJAX异步请求后台代码并且保存数据

@H_333_404@varnum = Front.Member.ME_MembersCardNo_Add.SaveIsCardMembersNO(rowindex,CarId,CarNo);

@H_333_404@if(rowindex != 0) {

document.getElementById(inputs[i].title).style.display = "none";

　　 //AJAX异步请求查询已发卡的会员资料

@H_333_404@ var dt = Front.Member.ME_MembersCardNo_Add.ReturnIsCardTableNo()

@H_333_404@ var IsCardT = document.getElementById("IsCardTable");

// for (var j = 0; j< IsCardT.rows.length; j++) {

//document.getElementById("IsCardTable").removeChild();

// }

// for (var j = 0; j< inputLen; j++) {

// if("hidden" == inputs[j].type) {

// if("name" == inputs[j].name) {

// if ("No"!= document.getElementById("No")) {

//

// }

// }

//

// }

// }

　　　//JQuery动态删除已发卡的员工表

$("#IsCardTable").remove();

　　 //JQuery动态添加已发卡的员工表（空表）

@H_333_404@ var table = $("<table id='IsCardTable' class='card_datalist'width='100%'><tr><td>会员卡号ID</td><td>会员卡号</td><td>姓名</td><td>性别</td><td>身份证</td><td>CPA证号</td></tr></table>");

$("#Addtable").append(table);

@H_333_404@ for (@H_333_404@var K = 0; K < dt.value.Rows.length; K++) {

@H_333_404@if (dt.value.Rows[K]["MemberNo"] == @H_333_404@null) {

@H_333_404@var tr = $("<tr id='" + dt.value.Rows[K]["Id"] + "'><td>"+ dt.value.Rows[K]["CarId"] + "<input type='hidden' id='" + dt.value.Rows[K]["Id"] + "' name='name' />" + "</td><td>" + dt.value.Rows[K]["CardNo"] + "</td><td>" + dt.value.Rows[K]["Mname"] + "</td><td>" + dt.value.Rows[K]["Sex"] + "</td><td>" + dt.value.Rows[K]["IdNo"] + "</td><td>" + " "+ "</td></tr>")

}

@H_333_404@else {

@H_333_404@var tr = $("<tr id='" + dt.value.Rows[K]["Id"] + "'><td>"+ dt.value.Rows[K]["CarId"] + "<input type='hidden' id='" + dt.value.Rows[K]["Id"] + "' name='name' />" + "</td><td>" + dt.value.Rows[K]["CardNo"] + "</td><td>" + dt.value.Rows[K]["Mname"] + "</td><td>" + dt.value.Rows[K]["Sex"] + "</td><td>" + dt.value.Rows[K]["IdNo"] + "</td><td>" + dt.value.Rows[K]["MemberNo"] + "</td></tr>")

}

$("#IsCardTable").append(tr);

}

}

@H_333_404@else{

alert("没有发卡的会员");

}

document.getElementById("txtMembersCardId").value = "";

document.getElementById("txtMembersCard").value = "";

}

　 </script>

</head>

<body>

<form id="form1" runat="server">

<!-- 当前提示 start -->

<div class="Tip">

<div class="Current">当前位置：<span><a href="ME_MembersCardNo_Mgr.aspx">非执业注师发卡</a></span>&nbsp;>>&nbsp;<a href="ME_MembersCardNo_Add.aspx">发卡</a><span style="color:#F00"><asp:Label

ID="lbl_title" runat="server"Text=""></asp:Label></span></div>

<div class="adminop"> <span>现在时间：<span id="current_time"></span> </span>

<script type="text/javascript" src="../Scripts/current_time.js"></script></div>

</div>

<!-- 当前提示 end -->

<div class="mian_content">

<div class="infoBox">

<h3><span style=" font-size:14px;">&nbsp;&nbsp;&nbsp;未发卡表</span></h3>

<table class="card_list" cellpadding="0"width="80%" cellspacing="0">

<tr><td>

<table cellpadding="0"cellspacing="0" width="100%"><tr><td style="height:30px; padding:10px 10px 0 10px;">

所属事务所&nbsp;&nbsp;<asp:DropDownList ID="ddlOffice"runat="server">

<asp:ListItem Value="">--请选择--</asp:ListItem>

</asp:DropDownList>

CPA证号&nbsp;&nbsp;<asp:TextBox ID="txtCPANo"runat="server"></asp:TextBox>

姓名&nbsp;&nbsp;<asp:TextBox ID="txtName"runat="server"></asp:TextBox>

<asp:Button ID="BtnSearch"CssClass="Submit"runat="server"Text="查询" onclick="BtnSearch_Click"/></td></tr>

<tr><td style="padding:0 10px; height:30px;">

<asp:Button ID="LBtnDelMembersNoCard" CssClass="Submit"runat="server" OnClientClick="return delTableRowNo();" Text="删除不需发卡注师"/>

</td></tr></table>

</td></tr>

<tr><td style="padding:0 10px 10px 10px;">

<table id="TMain"class="card_datalist" width="100%" >

<tr>

<td align="center">

<input type="checkBox"id="checkAll" onclick="IscheckAll()"/>

</td>

<td>

会员卡号ID

</td>

<td>

会员卡号

</td>

<td>

姓名

</td>

<td>

性别

</td>

<td>

身份证

</td>

<td>

CPA证号

</td>

</tr>

<asp:Repeater ID="Repeater1"runat="server">

<ItemTemplate>

<tr id='<%#Eval("Id")%>'>

<td align="center">

<%--<input id="checkBox1"type="checkBox" isEditRow="true" value='<%#Eval("Id")%>'/>--%>

<%--<asp:CheckBox ID="CheckBox1"runat="server"ToolTip='<%# Eval("Id") %>' isEditRow="true"></asp:CheckBox>--%>

<input type="checkBox" id='<%#Eval("Id")%>'title='<%#Eval("Id")%>'/>

<asp:HiddenFieldID="HiddenField1"runat="server"Value='<%#Eval("Id")%>' />

</td>

<td>

<%#Eval("CarId")%>

</td>

<td>

<%#Eval("CardNo")%>

</td>

<td>

<%#Eval("Mname")%>

</td>

<td>

<%#Eval("Sex")%>

</td>

<td>

<%#Eval("IdNo")%>

</td>

<td>

<%#Eval("MemberNo")%>

</td>

</tr>

</ItemTemplate>

</asp:Repeater>

</table>

</td>

</tr>

</table>

<h3><span style=" font-size:14px;">&nbsp;&nbsp;&nbsp;已发卡表</span></h3>

<table class="card_list"cellpadding="0" width="80%"cellspacing="0">

<tr>

<td id="Addtable"style="padding:10px;">

<table id="IsCardTable"class="card_datalist" width="100%">

<tr>

<%--<td>

<input type="checkBox"id="CheckBox2" onclick="IscheckAll();"/>

</td>--%>

<td>

会员卡号ID

</td>

<td>

会员卡号

</td>

<td>

姓名

</td>

<td>

性别

</td>

<td>

身份证

</td>

<td>

CPA证号

</td>

</tr>

<asp:Repeater ID="Repeater2"runat="server">

<ItemTemplate>

<tr >

<%-- <td>

<asp:CheckBoxID="CheckBox1"runat="server"/>

</td>--%>

<td>

<%#Eval("CarId")%>

</td>

<td>

<%#Eval("CardNo")%>

</td>

<td>

<%#Eval("Mname")%>

</td>

<td>

<%#Eval("Sex")%>

</td>

<td>

<%#Eval("IdNo")%>

</td>

<td>

<%#Eval("MemberNo")%>

</td>

</tr>

</ItemTemplate>

</asp:Repeater>

</table>

</td>

</tr>

</table>

<h3><span style=" font-size:14px;">&nbsp;&nbsp;&nbsp;增加会员卡号</span></h3>

<table class="card_list"cellpadding="0" width="80%"cellspacing="0">

<tr><td align="center"style="height:30px;">

会员卡号Id&nbsp;&nbsp;<asp:TextBoxID="txtMembersCardId"runat="server" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"> </asp:TextBox>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

会员卡号&nbsp;&nbsp;<asp:TextBox ID="txtMembersCard"runat="server"onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"> </asp:TextBox>

</td></tr>

<tr><td align="center"style="height:30px;">

<%--<asp:Button ID="BtnSaveCard"class="form_buttom"runat="server"Text="保存" OnClientClick="return checkBtn();" onclick="BtnSaveCard_Click"/>--%>

<input type="button"class="form_buttom" id="button1" onclick="AddTableRowNo();" value="保存"/> &nbsp;&nbsp;&nbsp;&nbsp;

<asp:Button ID="Button1"class="form_buttom"runat="server"Text="返回" onclick="Button1_Click"/>

</td></tr></table>

</div></div>

</form>

</body>

</html>

原文链接：https://www.f2er.com/ajax/163254.html

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作