第一篇博客,发下我自己写的jQuery调用WebService实现增删改查的实现。 1 <!DOCTYPE html> 2 3 <html ="http://www.w3.org/1999/xhtml"> 4 5 <head& ...
第一篇博客,发下我自己写的jQuery调用WebService实现增删改查的实现。
1 <!DOCTYPE html> 2 3 <html ="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 9 <title></title> 10 11 <script src='/images/loading.gif' data-original="script/jquery-1.10.2.js"></script> 12 13 <script src='/images/loading.gif' data-original="script/jquery.validate-vsdoc.js"></script> 14 15 <script src='/images/loading.gif' data-original="script/jquery.validate.js"></script> 16 17 18 19 <style type="text/css"> 20 21 td { 22 23 width: 200px; 24 25 } 26 27 </style> 28 29 <script type="text/javascript"> 30 31 32 33 //-----------获取全部用户信息----------- 34 35 var myData; 36 37 $(document).ready( 38 39 function () { 40 41 $.ajax({ 42 43 type: 'POST', 44 45 contentType: 'application/json;charset=utf-8', 46 47 url: 'http://localhost:12383/UserService.asmx/GetUser', 48 49 data: '{}', 50 51 dataType: 'json', 52 53 error: function (x, e) { 54 55 alert('系统错误请联系系统管理员') 56 57 }, 58 59 success: function (result) { 60 61 $.each(result.d, function (index, data) {//循环index是索引,data是值 62 63 myData += 64 65 "<tr id= " + data.Id + "_tr> <td> <input type='checkbox' id='' /> </td>" 66 67 + "<td> " + data.Id + "</td>" 68 69 + "<td class='input'>" + data.Name + "</td>" 70 71 + " <td id='" + data.Id + "_edit' ><span class='delete' style='cursor:pointer' >删除 </span> <span style='cursor:pointer' class='update'>修改</span> </td>" 72 73 + "</tr>"; 74 75 }); 76 77 $("#tb1").append(myData); 78 79 } 80 81 }); 82 83 84 85 //----------------增加用户----------------- 86 87 $("#add").click(function () { 88 89 var _len = $("#tb1 tr").length; 90 91 var id; 92 93 $("#tb1").append("<tr class=" + _len + "_save align='center'>" 94 95 + "<td> <input type='checkbox' id='' /></td>" 96 97 + "<td> </td>" 98 99 + "<td> <input type='text' name = 'name' class='name' /> </td>"100 101 + " <td id='edit'><span class='delete' style='cursor:pointer'>删除</span> <span style='cursor:pointer' class='update' >修改</span></td>"102 103 + "</tr>");104 105 $(".name")[0].focus();106 107 108 109 //失去焦点自动保存110 111 $(".name").on("blur", function () {112 113 var myName = $(this).val();114 115 //判断是否没有输入数据116 117 if (myName == '') {118 119 alert('请输入数据');120 121 //return;122 123 }124 125 126 127 $.ajax({128 129 type: 'post',130 131 contentType: 'application/json;charset=utf-8',132 133 url: 'http://localhost:12383/UserService.asmx/AddUser',134 135 data: '{ name:"' + myName + '"}',136 137 dataType: 'json',138 139 error: function (e, x) {140 141 // alert('系统错误请联系系统管理员!');142 143 $(".name").parent().parent().remove("tr");144 145 },146 147 success: function (result) {148 149 if (result.d > 0) {150 151 alert('添加成功!');152 153 id = result.d;154 155 $(".name").parent().parent().children().eq(1).html(result.d);156 157 $(".name").parent().removeClass("name").html(myName);158 159 } else {160 161 alert('添加失败!');162 163 }164 165 }166 167 })168 169 //alert(name+'保存成功!');170 171 });172 173 174 175 });176 177 178 179 //------------------修改用户----------------------------180 181 $("#tb1").click(function (e) {182 183 if (e.target.className == 'update') {184 185 var id = $(e.target).parent().siblings('td').eq(1).text();186 187 var oldName = $(e.target).parent().siblings('td').eq(2).text();188 189 $(e.target).parent().siblings("td").eq(2).html('<input type="text" name="name" value="' + oldName + '" />');190 191 //让文本框得到焦点192 193 $(e.target).parent().siblings('td').eq(2).children('.updateName')[0].focus();194 195 //当文本框失去焦点时196 197 $(e.target).parent().siblings('td').eq(2).children('.updateName').on('blur', function () {198 199 var newName = $(e.target).parent().siblings('td').eq(2).children('.updateName').val();200 201 if (newName == '') {202 203 newName = oldName;204 205 };206 207 //到数据库修改208 209 $.ajax({210 211 type: 'post',212 213 contentType: 'application/json',214 215 url: 'http://localhost:12383/UserService.asmx/UpdateUser',216 217 data: '{id:' + id + ',name:"' + newName + '"}',218 219 dataType: 'json',220 221 error: function (e, x) {222 223 alert('系统错误请联系系统管理员!')224 225 },226 227 success: function (result) {228 229 if (result.d) {230 231 alert('修改成功!')232 233 $(e.target).parent().siblings('td').eq(2).html(newName);234 235 } else {236 237 alert('修改失败!')238 239 }240 241 }242 243 });244 245 });246 247 248 249 250 251 }252 253 });254 255 256 257 258 259 //------------------删除用户--------------------------260 261 //删除行(未使用) onclick='deleteUser(" + data.Id + ")'262 263 $("#tb1").click(function (e) {264 265 if (e.target.className == "delete") {266 267 $(e.target).parents("tr").remove();268 269 var id = $(e.target).parent().siblings("td").eq(1).text();270 271 //alert(id);272 273 $.ajax({274 275 type: 'post',276 277 contentType: 'application/json',278 279 url: 'http://localhost:12383/UserService.asmx/DelUser',280 281 data: '{id:' + id + '}',282 283 dataType: 'json',284 285 error: function (e, x) {286 287 alert('系统错误请联系管理员!');288 289 },290 291 success: function (result) {292 293 alert('删除成功!');294 295 }296 297 })298 299 }300 301 });302 303 });304 305 306 307 </script>308 309 </head>310 311 <body>312 313 314 315 <h1 style="text-align:center;margin-top:10%">用户管理</h1>316 317 318 319 <span style="margin-top:25%;margin-left:75%">320 321 <a id="save" style="cursor:pointer">保存</a> 322 323 <a id="add" style="cursor:pointer">添加</a>324 325 </span>326 327 <table align="center" id="tb1" border="1px" style="text-align:center;margin-top:1%; border-collapse: collapse; ">328 329 <tr><th></th><th>ID</th><th>姓名</th><th>操作</th></tr>330 331 332 333 </table>334 335 336 337 </body>338 339 </html>340 341
原标题:jQuery调用WebService实现增删改查的实现
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。