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 ...
随机推荐
- KeyBord事件从Activtiy层往下分发详细过程代码示例
step1:调用Activity成员函数dispatchKeyEvent public boolean dispatchKeyEvent(KeyEvent event) { // Let action ...
- [LINK]Scribe
http://www.361way.com/scribe-chukwa-kafka-flume/4119.html
- c语言 指针与地址的区别
指针由两部分组成,指针的类型和指针的值(也就是变量的地址). 指针和地址的区别: 地址只是一堆十六进制的字符,对应着内存条的某段内存, 而指针本身有地址,指针的值也是一个地址,指针本身还有类型,这与单 ...
- React Native开发技术周报2
(1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...
- 安卓开发：效果图中标注的像素尺寸如何转换为安卓的dp尺寸？
我们的UI基于1920x1080分辨率给的尺寸标注,但是在安卓开发中大家一般都使用dp.sp来标注界面尺寸,所以需要一个dp与sp的转换公式. 一开始参考的的这篇文章:关于Android开发中px.d ...
- 解决nf_conntrack: table full, dropping packet问题
" > /proc/sys/net/nf_conntrack_max iptables -t raw -A PREROUTING -p tcp -m tcp --dport -j NO ...
- 一例完整的websocket实现群聊demo
前言 业余我都会花一些时间在tcp.http和websocket等领域的学习,现在觉得有点收获,所以把一个基于websocket的群聊功能的例子提供给大家玩玩.当然这是一个很完整的例子,包括webso ...
- （二十一）状态模式详解（DOTA版）
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 本次LZ给各位介绍状态模式, ...
- Log4net使用(二)
日志记录到根目录Log文件夹,文件夹中分LogError与LogInfo文件夹 web.config配置: <configSections> <section name=" ...
- UTF-8和Unicode
What's the difference between unicode and utf8? up vote 103 down vote favorite 49 Is it true that un ...