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 ...
随机推荐
- Git版本恢复命令reset(转载)
本博文转载自:http://www.tech126.com/git-reset/: 如果看不懂的话,请在git下练习,如果练习后任然有不懂的,可以留言也可以发送邮件到luoquantao@126.co ...
- php配置rewrite模块
转 (1) 启用rewrite模块,在默认情况下,没有启用 修改httpd.conf文件 #启动rewrite模块 LoadModule rewrite_module modules/mod_r ...
- Java 集合系列11之 Hashtable详细介绍(源码解析)和使用示例
概要 前一章,我们学习了HashMap.这一章,我们对Hashtable进行学习.我们先对Hashtable有个整体认识,然后再学习它的源码,最后再通过实例来学会使用Hashtable.第1部分 Ha ...
- 安装Ubuntu时的硬盘分区方案
如果你准备在硬盘里只安装Ubuntu一个操作系统的话,建议你采用一个“/”.一个“swap”和一个“/home”的三分区方案:/ :10GB-15GB.swap:物理内存小于或等于 512MB,建议分 ...
- MyEclipse对Struts2配置文件较检异常 Invalid result location value/parameter
有时在编写struts.xml时会报错,但是找不出有什么她方有问题.也能正常运行 MyEclipse有地方去struts的xml进行了验证,经查找把这里 的build去掉就可以了
- IDEA 13 无法进入debug 模式解决方案
1.最近在idea中使用tomcat开发项目,像往常一样打开tomcat进行debug,但奇怪的事情出现了,项目根本不进断点.后查找原因,估计idea的加载参数方式是:先加载tomcat中设置的参数, ...
- CodeIgniter框架入门教程——第三课 URL及ajax
本文转载自:http://www.softeng.cn/?p=74 这节课讲一下CI框架的路由规则,以及如何在CI框架下实现ajax功能. 首先,先介绍CI框架的路由规则,因为CI框架是在PHP的基础 ...
- 搭建emacs的go编程语言环境
关于emacs就不说明了,直接切入主题.关于我的emacs配置,可以直接参考GitHub上的lienhua34/myemacs-conf. go-mode 安装 关于go-mode的安装,可以直接参考 ...
- 离散系统频响特性函数freqz()
MATLAB提供了专门用于求离散系统频响特性的函数freqz(),调用freqz()的格式有以下两种: l [H,w]=freqz(B,A,N) B和A分别为离散系统的系统函数分子.分母 ...
- JavaScript学习笔记- 自定义滚动条插件
此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...