码迷,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
迷上了代码!