Ajax初步认识BigRocWings

首先我们自己搭建个表,具体的字段可以自己来设置,然后增加点数据即可,自己写分页存储过程,这个分页存储我直接用的代码生成器生成,其实大家可以根据自己的需求来写分页,然后我是用的三层,如果自己写分页存储过程,可以自己写Dal层的代码,会比较麻烦,但是写一次以后都能用了..我偷懒了直接用动软那套了.然后分页还需要一个生成html字符串的代码,用于在前台生成页码超链接,我本来想把它改成JS方法的,但是没成功,js实在烂,这样可以再后台穿参数过去即可,不需要传html标签字符串,增加传输量,具体的如下:

具体代码如下:

$(function(){//inittable$('#EditUser').css("display","none");InitUserListByPage();//innitpagenavagationInitPageNavigation();这样根据页码跟页数得到数据,并且页面不用跳转:具体效果如下:不足之处在于点击当前页还是会刷新,这个很好解决,给当前也注册事件就OK了~

删除数据

下面所要做的操作就是删除数据,这个就简单了,发个一个异步请求到后台,删除即可,我的做法就是在生成表格后加个删除超链接,为超连接都加上个class="deleteLink"跟"UserID"=前面或者的ID,这样就方便传递ID跟或者a标签,需要注意的就是给a标签注册事件事件时必须在加载表格后再注册,不然会失效的,同样的我们封装成一个方法function:

functionDeleUser(){$('.DeleteLink').click(function(){varuserId=$(this).attr("userId");vartd=$(this);if(confirm("areyousure")){$.get("DeleteUser.ashx",{id:userId},function(data){if(data="true"){td.parent().parent().hide("slow");}else{alert("Error");}});}returnfalse;});}一般删除都需要有个确认,这里用confirm来确定,必须returnfalse,后台代码很简单根据Id删除就行了,返回trueorfalse

添加数据

如同删除一样在后面加上添加超链接,并给超连接注册事件,这里我是点击,然后弹出个层来给用户修改,上面展示数据,有个修改按钮,并且给按钮注册事件,也就是给后台修改同样是异步,弹出个遮罩层我直接用jquery-ui来了,自己写也能写,但又要写一陀.刚开始的时候,我们首先让修改层隐藏,点击超链接,层出现,并把数据显示出来,后台修改也要把原来的数据都查数来,因为有些数据是不会给用户看的,更新的时候统统要更新的,后台代码逻辑很简单.

//注册添加用户事件functionEdituser(){$('.UpdateLink').click(function(){varid=$(this).attr('userId');$.getJSON("GetUserInfoById.ashx",{id:id},function(data){$("#hidden").val(data.ID);$("#txtShowId").text(data.ID);$("#LoginNameShow").val(data.LoginName);$("#MailShow").val(data.Mail);$('#PhoneShow').val(data.phone);})//$("#hidden").val(id);//$('#txtShowId').text(id);$("#EditUser").dialog({//设置div为dialogautoOpen:false,title:"注册用户",height:400,width:1000,modal:true});$("#EditUser").dialog("open");returnfalse;})}这里显示数据我是直接发个请求到后台根据ID或者数据,然后显示到层上,下面就是给Update注册事件了:

functionUpdateUser(){$('#Update').click(function(){varJsonData={Id:$("#hidden").val(),Phone:$('#PhoneShow').val(),LoginName:$("#LoginNameShow").val(),Mail:$("#MailShow").val()}$.get("UpdateUser.ashx",JsonData,function(data){if(data="true"){$("#EditUser").dialog("close");InitUserListByPage();}})})}具体效果如下:

其实添加一般都是用户注册的,我们可以不用一个隐藏的层,我们可以用一个iframe指向注册页面,点击超链接,然后iframe显示,用户注册.如果要用iframe指向一个写好的页面来实现无刷新效果的话,ifame不能操作父页面的元素,这就带来了不方便.我们一般是这样父类提供一个属性或者方法,你可以调用方法来更改父类的私有字段,这里我们在原页面加入一个方法:

functionafterRegistSuccess(){$("#showRegistUser").dialog("close");//弹出对话框initUserTable();//绑定表格}iframe层为: