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 , ...
随机推荐
- for循环的嵌套 函数方法
1.双层for循环:外层循环控制行,内行循环控制列 for循环嵌套例子 用五角星组成一个矩形 // 99乘法表 // for(var i = 1 ;i <= 9 ; i++){ // f ...
- Java实现 LeetCode 327 区间和的个数
327. 区间和的个数 给定一个整数数组 nums,返回区间和在 [lower, upper] 之间的个数,包含 lower 和 upper. 区间和 S(i, j) 表示在 nums 中,位置从 i ...
- Java实现 蓝桥杯VIP 算法提高 P0401
算法提高 P0401 时间限制:1.0s 内存限制:256.0MB 输入一个无符号整数x,输出x的二进制表示中1的个数. 输入: 76584 输出: 7 import java.util.Scanne ...
- Java实现第九届蓝桥杯递增三元组
题目6.递增三元组 题目描述 给定三个整数数组 A = [A1, A2, - AN], B = [B1, B2, - BN], C = [C1, C2, - CN], 请你统计有多少个三元组(i, j ...
- PAT 德才论
宋代史学家司马光在<资治通鉴>中有一段著名的“德才论”:“是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人.凡取人之术,苟不得圣人,君子而与之,与其得小人,不若得愚人 ...
- 初学python笔记
一.关于python ① 由荷兰人Guido van Rossum(龟叔)于1989年圣诞节为打发无聊时间所编写的编程语言. ② python的特点:优雅 明确 简单.代码量少,运行速度快. 缺点:运 ...
- 【JAVA习题二十九】809*??=8*??+9*??+1 其中??代表的两位数,8*??的结果为两位数，9*??的结果为3位数。求??代表的两位数，及809*??后的结果。
package erase; public class 八九与问好两位数的乘积和 { public static void main(String[] args) { int m,n;//m十位,n个 ...
- 百度poi搜索
package baidumapsdk.demo.search; import android.os.Bundle; import android.support.v4.app.FragmentAct ...
- Matplotlib 的正确使用方法，画一张好看的图
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:Python中文社区 本文用的数据如图所示,Dataframe中显示 ...
- 快捷符号输入小tip(option,alt键的妙用)
我们知道特殊符号的输入可以通过上档键(shift)加数字来完成.如!@#$%... -> (shift + 1 2 3 4 5...) 但是少有人知道windows中的alt键,或是macos中 ...