第一篇博客,发下我自己写的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
).text();
186
).text();
188
).html('<input type="text" name="name" value="' + oldName + '" class="updateName"/>');
190
191                          //让文本框得到焦点
192
].focus();
194
195                          //当文本框失去焦点时
196
).children('.updateName').on('blur', function () {
198
).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
).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
).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  

更多.NET、数据库、大数据学习资料:欢迎访问http://itservicecn.com/

jQuery调用WebService实现增删改查的实现的更多相关文章

  1. C#利用WinForm调用WebServices实现增删改查

    实习导师要求做一个项目,用Winform调用WebServices实现增删改查的功能.写下这篇博客,当做是这个项目的总结.如果您有什么建议,可以给我留言.欢迎指正. 1.首先,我接到这个项目的时候,根 ...

  2. jquery 对select option 增删改查

    一.查 jQuery获取select的Text和Value: 代码如下: 1.当select添加选择事件,当选择其中一项时触发:          $("#select_id"). ...

  3. [jQuery EasyUI系列] 创建增删改查应用

    一.数据收集并妥善管理数据是网络应用共同的必要.CRUD允许我们生产页面列表并编辑数据库记录. 本文主要演示如何使用jQuery EasyUI实现CRUD DataGrid. 将使用到的插件有: da ...

  4. jQuery之必会增删改查Dom操作

    .next  .prev <button>change</button> <span class = '.demo'>aaa</span> <p ...

  5. Javascript/Jquery操作数组,增删改查以及动态创建HTML元素

    <html> <head> <title> New Document </title> <script src="~/Scripts/j ...

  6. 关于MVC工厂模式的增删改查sql存储过程

    这里MVC中用到了反射,工厂,泛型,接口 在搭建框架的时候,除了MVC的三层以外,还有泛型的接口层和工厂层 下面是dal层调用sql存储过程,增删改查,dal层继承了接口层,实现了接口层里面的方法 1 ...

  7. 通过Java代码实现对数据库的数据进行操作:增删改查

    在写代码之前,依然是引用mysql数据库的jar包文件:右键项目-构建路径-设置构建路径-库-添加外部JAR 在数据库中我们已经建立好一个表xs :分别有xuehao  xingming    xue ...

  8. Java连接MySQL数据库,并进行增删改查

    1.具体的代码实现 import java.sql.*; public class DatabaseService { /** * Create Connection * * @param dbtyp ...

  9. AJAX 调用WebService 、WebApi 增删改查(笔记)

    经过大半天努力,终于完成增删改查了!心情有点小激动!!对于初学者的我来说,一路上都是迷茫,坑!!虽说网上有资料,可动手起来却不易(初学者的我).(苦逼啊!) WebService 页面: /// &l ...

随机推荐

  1. Git版本恢复命令reset(转载)

    本博文转载自:http://www.tech126.com/git-reset/: 如果看不懂的话,请在git下练习,如果练习后任然有不懂的,可以留言也可以发送邮件到luoquantao@126.co ...

  2. php配置rewrite模块

    转 (1)    启用rewrite模块,在默认情况下,没有启用 修改httpd.conf文件 #启动rewrite模块 LoadModule rewrite_module modules/mod_r ...

  3. Java 集合系列11之 Hashtable详细介绍(源码解析)和使用示例

    概要 前一章,我们学习了HashMap.这一章,我们对Hashtable进行学习.我们先对Hashtable有个整体认识,然后再学习它的源码,最后再通过实例来学会使用Hashtable.第1部分 Ha ...

  4. 安装Ubuntu时的硬盘分区方案

    如果你准备在硬盘里只安装Ubuntu一个操作系统的话,建议你采用一个“/”.一个“swap”和一个“/home”的三分区方案:/ :10GB-15GB.swap:物理内存小于或等于 512MB,建议分 ...

  5. MyEclipse对Struts2配置文件较检异常 Invalid result location value/parameter

    有时在编写struts.xml时会报错,但是找不出有什么她方有问题.也能正常运行 MyEclipse有地方去struts的xml进行了验证,经查找把这里 的build去掉就可以了

  6. IDEA 13 无法进入debug 模式解决方案

    1.最近在idea中使用tomcat开发项目,像往常一样打开tomcat进行debug,但奇怪的事情出现了,项目根本不进断点.后查找原因,估计idea的加载参数方式是:先加载tomcat中设置的参数, ...

  7. CodeIgniter框架入门教程——第三课 URL及ajax

    本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...

  8. 搭建emacs的go编程语言环境

    关于emacs就不说明了,直接切入主题.关于我的emacs配置,可以直接参考GitHub上的lienhua34/myemacs-conf. go-mode 安装 关于go-mode的安装,可以直接参考 ...

  9. 离散系统频响特性函数freqz()

    MATLAB提供了专门用于求离散系统频响特性的函数freqz(),调用freqz()的格式有以下两种: l        [H,w]=freqz(B,A,N) B和A分别为离散系统的系统函数分子.分母 ...

  10. JavaScript学习笔记- 自定义滚动条插件

    此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...