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
).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>
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实现增删改查的实现的更多相关文章
- C#利用WinForm调用WebServices实现增删改查
实习导师要求做一个项目,用Winform调用WebServices实现增删改查的功能.写下这篇博客,当做是这个项目的总结.如果您有什么建议,可以给我留言.欢迎指正. 1.首先,我接到这个项目的时候,根 ...
- jquery 对select option 增删改查
一.查 jQuery获取select的Text和Value: 代码如下: 1.当select添加选择事件,当选择其中一项时触发: $("#select_id"). ...
- [jQuery EasyUI系列] 创建增删改查应用
一.数据收集并妥善管理数据是网络应用共同的必要.CRUD允许我们生产页面列表并编辑数据库记录. 本文主要演示如何使用jQuery EasyUI实现CRUD DataGrid. 将使用到的插件有: da ...
- jQuery之必会增删改查Dom操作
.next .prev <button>change</button> <span class = '.demo'>aaa</span> <p ...
- Javascript/Jquery操作数组，增删改查以及动态创建HTML元素
<html> <head> <title> New Document </title> <script src="~/Scripts/j ...
- 关于MVC工厂模式的增删改查sql存储过程
这里MVC中用到了反射,工厂,泛型,接口 在搭建框架的时候,除了MVC的三层以外,还有泛型的接口层和工厂层 下面是dal层调用sql存储过程,增删改查,dal层继承了接口层,实现了接口层里面的方法 1 ...
- 通过Java代码实现对数据库的数据进行操作：增删改查
在写代码之前,依然是引用mysql数据库的jar包文件:右键项目-构建路径-设置构建路径-库-添加外部JAR 在数据库中我们已经建立好一个表xs :分别有xuehao xingming xue ...
- Java连接MySQL数据库，并进行增删改查
1.具体的代码实现 import java.sql.*; public class DatabaseService { /** * Create Connection * * @param dbtyp ...
- AJAX 调用WebService 、WebApi 增删改查（笔记）
经过大半天努力,终于完成增删改查了!心情有点小激动!!对于初学者的我来说,一路上都是迷茫,坑!!虽说网上有资料,可动手起来却不易(初学者的我).(苦逼啊!) WebService 页面: /// &l ...
随机推荐
- EntityFramework Core 封装
public class EntityBaseRepository<T> : IEntityBaseRepository<T> where T : class, IEntity ...
- DPABI advanced edition 文件夹组织形式
❤ Regress out nuisance: ... csf\wm ('SPM apriori') {working directory}\Masks\WarpedMasks\SubIndex_Wh ...
- SQL80001: Incorrect syntax near ':'
原文连接:http://geekswithblogs.net/tonyt/archive/2010/03/05/138363.aspx SQL80001: Incorrect syntax nea ...
- 15个nosql数据库
1.MongoDB 介绍 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.主要解决的是海量数据的访问效率问题,为WEB应用提供可扩展的高性能数据存储解决方案.当数据量达到50GB以上 ...
- [java]java语言初探 servlet+jsp架构
<<head first java>> https://www.tutorialspoint.com/jsp/jsp_architecture.htm JSP Processi ...
- 异常和IO
异常 异常是指java程序运行时(非编译)所发生的非正常情况或错误. Java对异常进行了分类,不同类型的异常分别用不同的 Java 类表示,所有异常的根类为 java.lang.Throwable, ...
- swifttextfield代理方法
//MARK:textfield delegate //键盘的高度 func textFieldShouldBeginEditing(textField: UITextField) -> Boo ...
- 从Hadoop Summit 2016看大数据行业与Hadoop的发展
前言: 好吧我承认已经有四年多没有更新博客了.... 在这四年中发生了很多事情,换了工作,换了工作的方向.在工作的第一年的时候接触机器学习,从那之后的一年非常狂热的学习机器学习的相关技术,也写了一些自 ...
- ASP.NET XmlSerializer权限问题
今天碰到一个奇怪问题.因为在2台服务器上做文件共享,使服务器A能访问服务器B的共享目录.在IIS上使用虚拟目录实现的话,需要给应用程序池指定一个统一的账号.在调试的时候能够使用,但是一部署到服务器上, ...
- C程序中对时间的处理——time库函数详解
包含文件:<sys/time.h> <time.h> 一.在C语言中有time_t, tm, timeval等几种类型的时间 1.time_t time_t实际上是长整数类型, ...