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 ...
随机推荐
- [No000052]大蒜怎么吃最美容？吃大蒜的功效及禁忌
大蒜是最常见的香辛调味料,它被称为天然抗生素,富含大蒜素等多种营养物质和抗氧化剂,具有多种美肤美容作用. 大蒜的5种美容功效 1.除皱.大蒜里的某些成分,有类似维生素E与维生素C的抗氧化.防衰老特性, ...
- [No00001D]解决5个问题，马上开口说英语
- android：TableLayout表格布局详解
1.TableLayout简介2.TableLayout行列数的确定3.TableLayout可设置的属性详解4.一个包含4个TableLayout布局的实例及效果图一.Tablelayout简介 ...
- flask表单提交的两种方式
一.通用方式 通用方式就是使用ajax或者$.post来提交. 前端html <form method="post" action="/mockservice&qu ...
- iOS原生项目中集成React Native
1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...
- MathType 公式后的空格问题
注册表编辑器修改 Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Design Science\DSMT6\WordC ...
- java基础：所有参数皆是按值参数
c#中对于参数的传递,有二种处理方式,默认情况下:值类型的参数,按值传递(即:方法体内的参数是原值的副本):引用类型的参数,"加ref关键字后“,按引用传递(即:方法体内的参数,是对象的指针 ...
- ubuntu13.04环境hadoop1.2.1单机模式安装
一.虚拟机上安裝ubuntun 13.04 中文版 当然,你要是习惯看英文版,也可以直接安装英文版.老老实实从官网下载安装即可,安装系统不是本文的重点.这里只提一个注意事项:新手安装前,切记断网,因为 ...
- [MetaHook] Quake FMOD player demo
CFMOD.h #ifndef CFMOD_H #define CFMOD_H #include "qfmod.h" struct Sound_t { char *pszName; ...
- 直流调速系统Modelica基本模型
为了便于在OpenModelica进行仿真,形成一个完整的仿真模型,没有使用第三方的库,参照了DrModelica的例程,按照Modelica库的开源模型定义了所用的基本元件模型. 首先给出一些基本类 ...