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 ...
随机推荐
- webSocket ws协议测试
最近公司做了个直播的项目,需要用到Websocket进行通信,因而需要对socket最大连接数及稳定性进行测试.当初得到这一需求的时候,唯一想到的就是jmeter,从百度下载相应的socket依赖ja ...
- bzoj3223 文艺平衡树 (treap or splay分裂+合并)
3223: Tyvj 1729 文艺平衡树 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 3313 Solved: 1883 [Submit][S ...
- Android ART运行时与Dalvik虚拟机
这几天在做一个项目时需要在Android中使用OSGi框架(Apache Felix),于是在一个android 4.4.2 版本系统的某品牌的平板上实验. 实验内容很简单:把felix包里的feli ...
- HTML 学习笔记 CSS(表格)
CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...
- HTML 学习笔记(图像)
HTML 图像 图像标签(<img>)和源属性(Src) 在HTML中,图像由<img>标签定义. <img>是空标签,意思是说,他只包含属性,并且没有闭合标签 要 ...
- 如何迁移Alwayson AG
Windows cluster要求同一个cluster中的所有windows版本都是相同的,这样就出现一个问题,当我们要将对windows进行升级时,(例如从windows 2008 R2升级到win ...
- node基础07：写文件
1.writeFile //server.js var http = require("http"); var writefile = require("./writef ...
- 完全背包变型题（hdu5410)
这是2015年最后一场多校的dp题,当时只怪自己基础太差,想了1个多小时才想出来,哎,9月份好好巩固基础,为区域赛做准备.题目传送门 题目的意思是给你n元钱,m类糖果,每类糖果分别有p, a, b, ...
- 二：【nopcommerce系列】Nop的文件结构，引用关系。如何编译打包部署等
如果,你还没先看第一篇,先看看 一:[nopcommerce系列]Nop整体架构的简单介绍,在看nop代码之前,你需要懂哪些东西 如果你确定你已经看完了第一篇,并且真的理解 mvc.和autofac, ...
- MPLS基础
1.1 MPLS简介 MPLS(Multiprotocol Label Switching,多协议标签交换)是一种新兴的IP骨干网技术.MPLS在无连接的IP网络上引入面向连接的标签交换概念,将第三 ...