第一篇博客,发下我自己写的jQuery调用WebService实现增删改查的实现。
1 <!DOCTYPE html> 2 3 <html xmlns="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="script/jquery-1.10.2.js"></script> 12 13 <script src="script/jquery.validate-vsdoc.js"></script> 14 15 <script src="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 + ‘" class="updateName"/>‘); 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
时间: 2024-10-10 12:25:36