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 ...
随机推荐
- [转] 如何设置Eclipse的上网代理
from: http://blog.csdn.net/qq635785620/article/details/8191799 不同版本的eclipse有不同的设置方法 方式一: 默认的Eclips ...
- 一个简单的Android富文本TextView实现
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Helvetica; color: #555555 } p.p2 { margin: 0.0p ...
- java类型转换
//java类型转换public class Demo2 { public static void main(String[] args){ int num1 = 55; int num2 =77; ...
- javascript中的链表结构
1.定义 很多编程语言中数组的长度是固定的,就是定义数组的时候需要定义数组的长度,所以当数组已经被数据填满的时候,需要再加入新的元素就很困难.只能说在部分变成语言中会有这种情况,在javascript ...
- js继承《转》
http://www.jb51.net/article/55540.htm http://www.cnblogs.com/OceanHeaven/p/4965947.html http://www.j ...
- js中三个对数组操作的函数 indexOf()方法 filter筛选 forEach遍历 map遍历
indexOf()方法 indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1. 不使用indexOf时 var arr = ['apple','orange','pea ...
- 4809 江哥的dp题c
4809 江哥的dp题c 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 有两个数x,y,一开始x=1,y= ...
- Java 并发工具包 java.util.concurrent 用户指南
1. java.util.concurrent - Java 并发工具包 Java 5 添加了一个新的包到 Java 平台,java.util.concurrent 包.这个包包含有一系列能够让 Ja ...
- 简单谈谈dom解析xml和html
前言 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.html,xml都是基于这个模型构造的.这也是一个W3C推出的标准.j ...
- Webwork 学习之路【01】Webwork与 Struct 的前世今生
Struts 1是全世界第一个发布的MVC框架,它由Craig McClanahan在2001年发布,该框架一经推出,就得到了世界上Java Web开发者的拥护,经过长达6年时间的锤炼,Struts ...