你的位置:首页 > Java教程

[Java教程]jQuery调用WebService实现增删改查的实现


第一篇博客,发下我自己写的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="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 + '" />');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>&nbsp;&nbsp;&nbsp;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 

View Code