AJAX 调用WebService 、WebApi 增删改查（笔记）
经过大半天努力，终于完成增删改查了！心情有点小激动！！对于初学者的我来说，一路上都是迷茫，坑！！虽说网上有资料，可动手起来却不易（初学者的我）。（苦逼啊！）
WebService 页面：
/// <summary>
/// TsetWeb 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。
[System.Web.Script.Services.ScriptService]
public class TsetWeb : System.Web.Services.WebService
{
TestBll bll = new TestBll(); [WebMethod(Description = "获取所有对象信息")]
public string AllUserJson()
{
return ToJson(bll.GetAllUser());
} [WebMethod(Description = "添加一个对象信息")]
public string SetUserJson(string name ,string phone)
{
return ToJson(bll.SetAddUser(name,phone));
}
[WebMethod(Description = "删除一个对象信息")]
public string DelUserJson(int id)
{
return ToJson(bll.DelUser(id));
}
[WebMethod(Description = "更改一个对象信息")]
public string Update(int id, string name, string phone)
{
Test user = new Test();
user.id = id;
user.name = name;
user.phone = phone;
return ToJson(bll.Update(user));
} //对数据序列化，返回JSON格式
public string ToJson(object obj)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
return serializer.Serialize(obj);
}
}
AJAX调用WebService 页面：
<body>
<form id="form1" runat="server">
<div>
<table id="tab">
<tr>
<td>编号</td>
<td>名字</td>
<td>电话</td>
<th>操作</th>
</tr>
</table>
</div>
<input type="button" name="add" id="add" value="添加" />
</form>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$.ajax({
url: "/TsetWeb.asmx/AllUserJson",
contentType: 'application/json',
dataType: "json",
type: "post",
success: function(data) {
var a = eval("(" + data.d + ")"); //后台返回是字符串，所以转换为json对象
$.each(a, function(index, item) {
var tr = $("<tr/>");
$("<td/>").html(item["id"]).appendTo(tr);
$("<td/>").html(item["name"]).appendTo(tr);
$("<td/>").html(item["phone"]).appendTo(tr);
$("<button id ='d' onclick='del(" + item["id"] + ")'>").html("删除").appendTo(tr);
$("<button id ='u' onclick='updata(" + item["id"] + ")'>").html("更新").appendTo(tr);
tr.appendTo("#tab");
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
}
});
});
$("#add").click(function() {
$.ajax({
url: "/TsetWeb.asmx/SetUserJson",
data: "{name:'李六',phone:'13727713819'}",
contentType: 'application/json',
dataType: "json",
type: "post",
success: function (data) {
var a = eval("(" + data.d + ")"); //后台返回是字符串，所以转换为json对象
alert(a);//返回1表示成功
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
}
});
});
function del(id) {
$.ajax({
url: "/TsetWeb.asmx/DelUserJson",
type: "Post",
data: { "id": id },
dataType: "json",
success: function (data) {
var a = eval("(" + data.d + ")"); //后台返回是字符串，所以转换为json对象
alert(a);//返回1表示成功
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
}
});
} function updata(id) {
$.ajax({
url: "/TsetWeb.asmx/Update",
type: "Post",
data: { "id": id, "name": '九九', "phone": '15927713819' },
dataType: "json",
success: function (data) {
var a = eval("(" + data.d + ")"); //后台返回是字符串，所以转换为json对象
alert(a);//返回1表示成功
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
}
});
}
</script>
</body>
WebApi页面：
public class ValuesController : ApiController
{
TestBll bll = new TestBll(); // GET api/values/GetAll()
[HttpGet]
public List<Test> GetAll()
{
return bll.GetAllUser();
}
[HttpPost]
public int PostNew([FromBody]Test user)
{
return bll.SetAddUser(user.name, user.phone);
}
[HttpPost]
public int PostNew(string name ,string phone)
{
return bll.SetAddUser(name, phone);
} [HttpDelete]
public int Delete([FromBody]Test user)
{
return bll.DelUser(user.id);
} [HttpPut]
public int Put([FromBody] Test user)
{
return bll.Update(user);
}
}
AJAX调用WebApi页面：
<div>
<table id="tab">
<tr>
<th>编号</th>
<th>名字</th>
<th>电话</th>
<th>操作</th>
</tr>
</table>
<input type="button" name="add" id="add" value="添加" />
</div>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$.ajax({
url: "api/Values/GetAll",
type: "GET",
dataType: "json",
success: function(data) {
$.each(data, function(index, item) {
var tr = $("<tr/>");
$("<td/>").html(item["id"]).appendTo(tr);
$("<td/>").html(item["name"]).appendTo(tr);
$("<td/>").html(item["phone"]).appendTo(tr);
$("<button id ='d' onclick='del(" + item["id"] + ")'>").html("删除").appendTo(tr);
$("<button id ='u' onclick='updata(" + item["id"] + ")'>").html("更新").appendTo(tr);
tr.appendTo("#tab");
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
}
}); });
$("#add").click(function () {
$.ajax({
url: "api/Values/Put",
type: "Put",
data: {"id":id, "name":'赵七',"phone":''},
dataType: "json",
success: function (data) {
alert(data);//返回1表示成功
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
}
});
});
function del(id) {
$.ajax({
url: "api/Values/Delete",
type: "Delete",
data: { "id": id },
dataType: "json",
success: function (data) {
alert(data);//返回1表示成功
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
}
});
} function updata(id) {
$.ajax({
url: "api/Values/Put",
type: "Put",
data: { "id": id, "name": '黄八', "phone": '' },
dataType: "json",
success: function (data) {
alert(data);//返回1表示成功
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
}
});
}
</script>
AJAX 调用WebService 、WebApi 增删改查（笔记）的更多相关文章
- jQuery调用WebService实现增删改查的实现
第一篇博客,发下我自己写的jQuery调用WebService实现增删改查的实现. 1 <!DOCTYPE html> 2 3 <html xmlns="http://ww ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查
MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的: 1.MVC3项目简单配置EF code first生成并初始化数据 ...
- C#利用WinForm调用WebServices实现增删改查
实习导师要求做一个项目,用Winform调用WebServices实现增删改查的功能.写下这篇博客,当做是这个项目的总结.如果您有什么建议,可以给我留言.欢迎指正. 1.首先,我接到这个项目的时候,根 ...
- AJAX 调用WebService 、WebApi 增删改查
WebService 页面: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 3 ...
- ASP.NET WebApi 增删改查
本篇是接着上一篇<ASP.NET WebApi 入门>来介绍的. 前言 习惯说 CRUD操作,它的意思是"创建. 读取. 更新和删除"四个基本的数据库操作.许多 HTT ...
- WebApi增删改查Demo
1.新建webapi项目 2.配置WebApiConfig public const string DEFAULT_ROUTE_NAME = "MyDefaultRoute"; p ...
- ajax——优化0126（增删改查：添加查看详情，返回结果类型为JSON型，在窗口显示）
效果: 鼠标点击查看详情时 数据库: 0126.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- 【mssql】增删改查笔记
一.插入数据 1.插入数据返回当前主键ID 当我们插入一条数据的时候,我们很多时候都想立刻获取当前插入的主键值返回以做它用.我们通常的做法有如下几种: 1. 先 select max(id) +1 , ...
随机推荐
- .NetCore3.1中的WebApi如何配置跨域
写法 一: 1. 打开Startup.cs,定义静态变量Any,用以配置跨域. private readonly string Any = "Any"; 2. 在Configure ...
- （Java实现）洛谷 P1093 奖学金
题目描述 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金.期末,每个学生都有3门课的成绩:语文.数学.英语.先按总分从高到低排序,如果两个同学总分相同,再按语文成绩从高 ...
- Java实现中值问题
中值问题是求一个n个数列表中某一数组下标k,它要求该下标元素比列表中的一半元素大,又比另一半元素小,这个中间的值被称为中值. 使用Lomuto划分算法思想,此处引用<算法设计与分析基础>第 ...
- Java实现微生物增殖
微生物增殖 假设有两种微生物 X 和 Y X出生后每隔3分钟分裂一次(数目加倍),Y出生后每隔2分钟分裂一次(数目加倍). 一个新出生的X,半分钟之后吃掉1个Y,并且,从此开始,每隔1分钟吃1个Y. ...
- java实现第五届蓝桥杯猜字母
猜字母 题目描述 把abcd-s共19个字母组成的序列重复拼接106次,得到长度为2014的串. 接下来删除第1个字母(即开头的字母a),以及第3个,第5个等所有奇数位置的字母. 得到的新串再进行删除 ...
- PAT甲级 Reversible Primes
描述 A reversible prime in any number system is a prime whose "reverse" in that number syste ...
- iOS－函数式编程 && 响应式编程概念
作为一个iOS developer,那么你一定用过Masnory / SnapKit: Masonry是一个OC开发中,非常好用的自动布局的第三方框架: SnapKit是Masonry团队打造的swi ...
- Java中的堆和栈
Java中的堆和栈 栈内存 存放基本数据类型和引用变量 堆内存 存放运行时创建的对象 一般来说,通过new关键字创建出来的对象都放在堆内存中 由于JVM是基于堆栈的虚拟机,而每个Java程序都运行在一 ...
- Android中数据缓存的处理
为了避免重复操作数据库带来的性能问题,可以将数据库中的数据一次性读入到内存中,这样使得对数据查询的操作变得更加高效,但是这样会带来数据同步的问题,所以需要在每次操作完内存中的数据,同步去操作数据库中的 ...
- QingStor 对象存储架构设计及最佳实践
对象存储概念及特性 在介绍 QingStor️对象存储内部的的架构和设计原理之前,我们首先来了解一下对象存储的概念,也就是从外部视角看,对象存储有什么特性,我们应该如何使用. 对象存储本质上是一款存储 ...