jQuery调用WebService实现增删改查的实现
第一篇博客，发下我自己写的jQuery调用WebService实现增删改查的实现。
1<!DOCTYPE html>23<htmlxmlns="http://www.w3.org/1999/xhtml">45<head>67<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>89<title></title>1011<scriptsrc="script/jquery-1.10.2.js"></script>1213<scriptsrc="script/jquery.validate-vsdoc.js"></script>1415<scriptsrc="script/jquery.validate.js"></script>16171819<styletype="text/CSS">2021td{2223width:200px;2425}2627</style>2829<scripttype="text/javascript">30313233//-----------获取全部用户信息-----------3435varmyData;3637$(document).ready(3839function() {4041$.Ajax({4243type:'POST',4445contentType:'application/json;charset=utf-8',4647url:'http://localhost:12383/UserService.asmx/GetUser',4849data:'{}',5051dataType:'json',5253error:function(x, e) {5455alert('系统错误请联系系统管理员')5657},5859success:function(result) {6061$.each(result.d,function(index, data) {//循环index是索引，data是值6263myData+=6465"<tr id="+data.Id+"_tr> <td> <input type='checkbox' id='' /> </td>"6667+"<td>"+data.Id+"</td>"6869+"<td class='input'>"+data.Name+"</td>"7071+"<td id='"+data.Id+"_edit' ><span class='delete' style='cursor:pointer' >删除 </span> <span style='cursor:pointer' class='update'>修改</span> </td>"7273+"</tr>";7475});7677$("#tb1").append(myData);7879}8081});82838485//----------------增加用户-----------------8687$("#add").click(function() {8889var_len=$("#tb1 tr").length;9091varid;9293$("#tb1").append("<tr class="+_len+"_save align='center'>"9495+"<td> <input type='checkbox' id='' /></td>"9697+"<td> </td>"9899+"<td> <input type='text' name = 'name' class='name' /> </td>"100101+"<td id='edit'><span class='delete' style='cursor:pointer'>删除</span> <span style='cursor:pointer' class='update' >修改</span></td>"102103+"</tr>");104105$(".name")[0].focus();106107108109//失去焦点自动保存110111$(".name").on("blur",function() {112113varmyName=$(this).val();114115//判断是否没有输入数据116117if(myName=='') {118119alert('请输入数据');120121//return;122123}124125126127$.ajax({128129type:'post',130131contentType:'application/json;charset=utf-8',132133url:'http://localhost:12383/UserService.asmx/AddUser',134135data:'{ name:"'+myName+'"}',136137dataType:'json',138139error:function(e, x) {140141//alert('系统错误请联系系统管理员！');142143$(".name").parent().parent().remove("tr");144145},146147success:function(result) {148149if(result.d>0) {150151alert('添加成功！');152153id=result.d;154155$(".name").parent().parent().children().eq(1).html(result.d);156157$(".name").parent().removeClass("name").html(myName);158159}else{160161alert('添加失败！');162163}164165}166167})168169//alert(name+'保存成功！');170171});172173174175});176177178179//------------------修改用户----------------------------180181$("#tb1").click(function(e) {182183if(e.target.className=='update') {184185varid=$(e.target).parent().siblings('td').eq(1).text();186187varoldName=$(e.target).parent().siblings('td').eq(2).text();188189$(e.target).parent().siblings("td").eq(2).html('<input type="text" name="name" value="'+oldName+'" class="updateName"/>');190191//让文本框得到焦点192193$(e.target).parent().siblings('td').eq(2).children('.updateName')[0].focus();194195//当文本框失去焦点时196197$(e.target).parent().siblings('td').eq(2).children('.updateName').on('blur',function() {198199varnewName=$(e.target).parent().siblings('td').eq(2).children('.updateName').val();200201if(newName=='') {202203newName=oldName;204205};206207//到数据库修改208209$.ajax({210211type:'post',212213contentType:'application/json',214215url:'http://localhost:12383/UserService.asmx/UpdateUser',216217data:'{id:'+id+',name:"'+newName+'"}',218219dataType:'json',220221error:function(e, x) {222223alert('系统错误请联系系统管理员！')224225},226227success:function(result) {228229if(result.d) {230231alert('修改成功！')232233$(e.target).parent().siblings('td').eq(2).html(newName);234235}else{236237alert('修改失败！')238239}240241}242243});244245});246247248249250251}252253});254255256257258259//------------------删除用户--------------------------260261//删除行(未使用) onclick='deleteUser(" + data.Id + ")'262263$("#tb1").click(function(e) {264265if(e.target.className=="delete") {266267$(e.target).parents("tr").remove();268269varid=$(e.target).parent().siblings("td").eq(1).text();270271//alert(id);272273$.ajax({274275type:'post',276277contentType:'application/json',278279url:'http://localhost:12383/UserService.asmx/DelUser',280281data:'{id:'+id+'}',282283dataType:'json',284285error:function(e, x) {286287alert('系统错误请联系管理员！');288289},290291success:function(result) {292293alert('删除成功！');294295}296297})298299}300301});302303});304305306307</script>308309</head>310311<body>312313314315<h1style="text-align:center;margin-top:10%">用户管理</h1>316317318319<spanstyle="margin-top:25%;margin-left:75%">320321<aid="save"style="cursor:pointer">保存</a> 322323<aid="add"style="cursor:pointer">添加</a>324325</span>326327<tablealign="center"id="tb1"border="1px"style="text-align:center;margin-top:1%; border-collapse: collapse; ">328329<tr><th></th><th>ID</th><th>姓名</th><th>操作</th></tr>330331332333</table>334335336337</body>338339</html>340341
View Code