首页 > 网站 > WEB开发 > 正文

jQuery调用WebService实现增删改查的实现

2024-04-27 15:00:43
字体:
来源:转载
供稿:网友

第一篇博客,发下我自己写的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>&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
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表