码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-08-20 15:00:40      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

第一篇博客,发下我自己写的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

 

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

标签:

原文地址:http://www.cnblogs.com/mfc-itblog/p/4744764.html

踩
(0)
赞
(0)
   
举报
评论 一句话评论(0)
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!