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 , ...
随机推荐
- 在jsp文件中出现Unknown tag (c:out)
出现这个提示之后,这个out是没有被执行的,在最前面加上 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix= ...
- 用js数组实现最原始的图片轮播实现
上班以来看到了,写了很多的轮播图效果,实现方法大致有 1.将图片局对定位,利用z-index和opacity实现图片渐现 2.用css3 的transtion:Xx xx left/right,实现左 ...
- Jmeter(七) - 从入门到精通 - 建立数据库测试计划实战<MySQL数据库>（详解教程）
1.简介 在实际工作中,我们经常会听到数据库的性能和稳定性等等,这些有时候也需要测试工程师去评估和测试,上一篇文章宏哥主要介绍了jmeter连接和创建数据库测试计划的过程,宏哥在文中通过示例和代码非常 ...
- Java 蓝桥杯 算法训练 字符串的展开 （JAVA语言实现)
** 算法训练 字符串的展开 ** 题目: 在初赛普及组的"阅读程序写结果"的问题中,我们曾给出一个字符串展开的例子:如果在输入的字符串中,含有类似于"d-h" ...
- Java实现 蓝桥杯 算法训练 字符串长度（IO无敌）
试题 算法训练 字符串长度 问题描述 输入一个字符串,输出其长度. 输入格式 输入一个字符串 输出格式 输出字符串长度 样例输入 一个满足题目要求的输入范例. HelloWorld 样例输出 10 数 ...
- Java实现 LeetCode 273 整数转换英文表示
273. 整数转换英文表示 将非负整数转换为其对应的英文表示.可以保证给定输入小于 231 - 1 . 示例 1: 输入: 123 输出: "One Hundred Twenty Three ...
- Java实现John's trip（约翰的小汽车）
1 问题描述 John's trip Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8998 Accepted: 3018 Sp ...
- 一个Jmeter模拟上传文件接口的实例
资料参考:https://blog.csdn.net/u010390063/article/details/78329373 项目中,避免不了要用到很多上传文件.图片的接口,那么碰到这类接口该如何进行 ...
- tensorflow2.0学习笔记第一章第二节
1.2常用函数 本节目标:掌握在建立和操作神经网络过程中常用的函数 # 常用函数 import tensorflow as tf import numpy as np # 强制Tensor的数据类型转 ...
- 曹工说JDK源码（4）--抄了一小段ConcurrentHashMap的代码，我解决了部分场景下的Redis缓存雪崩问题
曹工说JDK源码(1)--ConcurrentHashMap,扩容前大家同在一个哈希桶,为啥扩容后,你去新数组的高位,我只能去低位? 曹工说JDK源码(2)--ConcurrentHashMap的多线 ...