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

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

时间: 2024-10-10 12:25:36

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

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

一.数据收集并妥善管理数据是网络应用共同的必要.CRUD允许我们生产页面列表并编辑数据库记录. 本文主要演示如何使用jQuery EasyUI实现CRUD DataGrid. 将使用到的插件有: datagrid:向用户展示列表数据 dialog:创建并编辑一条单一的数据 form:用于提交表单数据 messager:显示一些操作信息 二.操作步骤 1.准备数据库并创建实例数据 2.创建DataGrid来显示用户信息 创建没有JavaScript代码的DataGrid 1 <table id=&qu

jQuery之必会增删改查Dom操作

.next  .prev <button>change</button> <span class = '.demo'>aaa</span> <p class = '.demo'>bbb</p> <script src="./jquery.js"></script> <script> $('button').click(function(){ $(this).next().css(

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

这里MVC中用到了反射,工厂,泛型,接口 在搭建框架的时候,除了MVC的三层以外,还有泛型的接口层和工厂层 下面是dal层调用sql存储过程,增删改查,dal层继承了接口层,实现了接口层里面的方法 1 namespace DAL 2 { 3 public class DalHouse : IHouse 4 { 5 public int Add(HouseInfo m) 6 { 7 string sql = "pro_add"; 8 SqlParameter eid = new SqlP

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

经过大半天努力,终于完成增删改查了!心情有点小激动!!对于初学者的我来说,一路上都是迷茫,坑!!虽说网上有资料,可动手起来却不易(初学者的我).(苦逼啊!) WebService 页面: /// <summary> /// TsetWeb 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.

Restful风格wcf调用2——增删改查

写在前面 上篇文章介绍如何将wcf项目,修改成restful风格的接口,并在上面提供了查询的功能,上篇文章中也感谢园友在评论中的提的建议,自己也思考了下,确实是那个道理.在urltemplate中,定义的url确实不规范,虽然能实现功能,但是缺少点专业性.rest风格的请求,是通过post,delete,get,put等请求方法来区别的,而不是通过在url中取不同的名字来进行区别.这里再次感谢@~Js园友提醒. 在这篇文章中将最新的代码贴出来,方便查看. 系列文章 Restful风格wcf调用 

使用Jquery 操作 sharepoint2013文档库(增删改查)

使用Jquery 操作 sharepoint2013文档库(增删改查) [html] view plaincopyprint? //https://xxx.sharepoint.com/AAA/_api/web/GetFolderByServerRelativeUrl('/AAA/SingtelLaunchProcess')/Files //https://xxx.sharepoint.com/AAA/_api/web/GetFolderByServerRelativeUrl('Document

Android学习---SQLite数据库的增删改查和事务(transaction)调用

上一篇文章中介绍了手工拼写sql语句进行数据库的CRUD操作,本文将介绍调用sqlite内置的方法实现CRUD操作,其实质也是通过拼写sql语句. 首先,创建一个新的android项目: 其次,查看代码实现增删查改: 1.创建DB工具类 MyDBHelper.java(创建数据库的操作) package com.amos.android_db; import android.content.Context; import android.database.sqlite.SQLiteDatabas

【jQuery】对网页节点的增删改查

本文与<[JavaScript]网页节点的增删改查>(点击打开链接)为姊妹篇,其实JavaScript对DOM的操作已经总结了很久的,而对于jQuery对网页节点的操作,虽然一直在用,但一直没有好好总结一下,实在是不应该. 下面举同样的例子来说明这个问题: 如上图,提供3个按钮,1个下拉列表,1个输入框,提供增删改查的操作. 网页中最多10个节点,最少0个节点,多了不让加,少了不让减. 首先是本网页的基本布局: <!DOCTYPE HTML PUBLIC "-//W3C//DT

数据结构 线性结构(数组[列表] ,链表 单链表的增删改查**, 线性结构的应用 队列 栈[函数的调用**]),非线性结构 树

数据结构 参考:http://lupython.gitee.io/ 线性结构 就是能够用一根线串起来的数据结构 数组 (列表) 问:申请数组的前提条件是啥? a[12]?内存需要满足的条件? 答:内存必须有一块连续的内存空间 int a[7] : 声明一个数组,这个数组的数组名是 a, 数组的大小是 7, 数组元素的类型是整型. int a[7] = array(1,2,3,4,5,6,7) 问:如何申请内存? 答:C,C++语言,申请:mallco (28).释放:free(28) 问:int