ajax请求基于restFul的WebApi(post、get、delete、put)
近日逛招聘软件，看到部分企业都要求会编写、请求restFul的webapi。正巧这段时间较为清闲，于是乎打开vs准备开撸。
1.何为restFul？
restFul是符合rest架构风格的网络API接口。
rest是一种软件架构的编码风格,是根据网络应用而去设计和开发的一种可以降低开发复杂度的编码方式,并且可以提高程序的可伸缩性(增减问题)。
几种较为常见的操作类型：get(查询)、post(新增)、put(修改)、delete(删除)
2.restFul标准的WebApi搭建以及部署在iis上
在这里为了方便，使用的ef框架，在创建读/写控制器时直接引用了模型类
控制器直接帮我帮crud的方法都写好了，按照注释的请求规则，可直接使用。代码如下：
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Description;
using webapi; namespace webapi.Controllers
{
public class ProductsController : ApiController
{
private DtoolsEntities db = new DtoolsEntities(); // GET: api/Products
[HttpGet]
public IQueryable<Product> GetProduct()
{
return db.Product.OrderByDescending(p => p.AddDate).Take();
} // GET: api/Products/5
[HttpGet]
[ResponseType(typeof(Product))]
public IHttpActionResult GetProduct(int id)
{
Product product = db.Product.Find(id);
if (product == null)
{
return NotFound();
} return Ok(product);
} // PUT: api/Products/5 update
[HttpPut]
[ResponseType(typeof(void))]
public IHttpActionResult PutProduct(int id, Product product)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
} if (id != product.Id)
{
return BadRequest();
}
product.AddDate = DateTime.Now;
db.Entry(product).State = EntityState.Modified; try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
if (!ProductExists(id))
{
return NotFound();
}
else
{
throw;
}
} return StatusCode(HttpStatusCode.NoContent);
} // POST: api/Products
[HttpPost]
[ResponseType(typeof(Product))]
public IHttpActionResult PostProduct(Product product)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
product.AddDate = DateTime.Now;
db.Product.Add(product);
db.SaveChanges(); return CreatedAtRoute("DefaultApi", new { id = product.Id }, product);
} // DELETE: api/Products/5
[HttpDelete]
[ResponseType(typeof(Product))]
public IHttpActionResult DeleteProduct(int id)
{
Product product = db.Product.Find(id);
if (product == null)
{
return NotFound();
} db.Product.Remove(product);
db.SaveChanges(); return Ok(product);
} protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
} private bool ProductExists(int id)
{
return db.Product.Count(e => e.Id == id) > ;
}
}
}
每个控制器前根据类型最好指定[HttpGet] [HttpPost] [HttpPut] [HttpDelete]，因为服务器是根据请求类型自动映射匹配控制器名称，加上特性，避免出错。
weiapi设置中指定json格式，避免数据类型异常
webapi的搭建基本没有问题了。接下来就是部署在iis上，这里不多做描述，不懂如何部署iis可点击这里（会被揍吗？）
3.前台ajax请求页面的编写
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript"> //部署在iis上的webapi接口具体请求路径
var httpUrl = "http://192.168.0.142:8018/api/Products"; $(function () {
$.ajax({
url: httpUrl,
type: "GET",
dataType: "json",
success: function (data) {
$.each(data, function (index, item) {
var tr = $("<tr/>");
$("<td/>").html(item["ProductName"]).appendTo(tr);
$("<td/>").html(item["Brand"]).appendTo(tr);
$("<td/>").html(item["ASIN"]).appendTo(tr);
$("<td/>").html(item["SKU"]).appendTo(tr);
$("<button id ='d' onclick='del(" + item["Id"] + ")'>").html("删除").appendTo(tr);
$("<button id ='u' onclick='update(" + item["Id"] + ")'>").html("更新").appendTo(tr);
tr.appendTo("#tab");
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
}
}); }); //修改
function update(id) {
$.ajax({
url: httpUrl + "?id=" + id,
type: "Put",
data: { "id": id, "ProductName": '男士领带', "Brand": '海澜之家', "ASIN": 'SAD498AE1', "SKU": '98DA7E9QE-SDAE', "StoreName": '海澜之家京东自营店' },
dataType: "json",
success: function (data) {
location.reload();
}
})
} //新增
function add() {
$.ajax({
url: httpUrl,
type: "Post",
data: { "ProductGuid": newGuid(), "ProductName": '男士衬衫', "Brand": '海澜之家', "ASIN": 'SAD498AE1', "SKU": '98DA7E9QE-SDAE', "StoreName": '海澜之家天猫旗舰店' },
dataType: "json",
success: function (data) {
location.reload();
}
})
} //删除
function del(id) {
$.ajax({
url: httpUrl+"/" + id,
type: "Delete",
dataType: "json",
success: function (data) {
location.reload();
}
});
} //生成guid
function newGuid() {
var guid = "";
for (var i = 1; i <= 32; i++) {
var n = Math.floor(Math.random() * 16.0).toString(16);
guid += n;
if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
guid += "-";
}
return guid;
}
</script>
</head>
<body>
<div>
<table id="tab">
<tr>
<th>产品名称</th>
<th>产品品牌</th>
<th>ASIN</th>
<th>SKU</th>
</tr>
</table>
<button id="add" onclick="add()">add</button>
</div> </body>
</html>
前端，后端代码都写完了。只剩测试了。想都不用想肯定会出问题的，因为涉及到了跨域请求等，接下来就为大家解决问题。
问题一：ajax请求，涉及到cors跨域，请求失败
问题介绍及原因分析：
CORS是一个W3C标准，全称是”跨域资源共享”。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，基本上目前所有的浏览器都实现了CORS标准,其实目前几乎所有的浏览器ajax请求都是基于CORS机制的。
跨域问题一般发生在Javascript发起AJAX调用，因为浏览器对于这种请求，所给予的权限是较低的，通常只允许调用本域中的资源，除非目标服务器明确地告知它允许跨域调用。所以，跨域的问题虽然是由浏览器的行为产生出来的，但解决的方法却 是在服务端。因为不可能要求所有客户端降低安全性。
解决方案：
web.config修改配置文件，使服务端支持跨域请求
<system.webServer>
<httpProtocol>
<customHeaders>
<!--服务器端返回Response header 后接URL或* 表示允许-->
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<!--支持请求的类型-->
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>
问题二：get、post 可正常请求，put、delete 出现405（Method Not Allowed） 注意:我提交Put的请求，浏览器响应的是Request Method:PUT
问题介绍及原因分析：
有些人会问：我刚刚在服务端设置了允许put delete请求了，浏览器上服务端的响应也看到了支持put delete，为啥服务端还是拒绝呢？
一切都是iis的WebDAV(Web Distribution Authorization Versioning) Publish惹的祸，WebDAV是基于HTTP协议的拓展，添加了很多Method用于管理服务器上的文件。若安装了WebDAV,那么iis所有的site都会默认使用WebDAV Module与WebDAV Handler。
WebDAV Handler的默认配置是处理如下 Method:PROPFIND,PROPPATCH,MKCOL,PUT,COPY,DELETE,MOVE,LOCK,UNLOCK。所以浏览器发送的put delete请求都会被拦截并交给WebDAV Handler来处理，并且WebDAV Handler会默认拒绝请求
解决方案：
既然我们找到了问题所在点，那么解决方案应然而生，那就是在配置文件里移除ebDAVModule和WebDAVHandler或者在系统中直接移除WebDAV
<system.webServer>
<!--以下配置为了让IIS +支持Put/Delete方法-->
<httpProtocol>
<customHeaders>
<!--服务器端返回Response header 后接URL或* 表示允许-->
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
<validation validateIntegratedModeConfiguration="false"/>
<handlers>
<!--移除WebDAV协议-->
<remove name="WebDAV"/>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<!--支持所有方式的请求-->
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
<!--IIS7/.5上必须加这个配置,否则访问报错-->
<modules runAllManagedModulesForAllRequests="true">
<!--移除WebDAV协议-->
<remove name="WebDAVModule"/>
<remove name="TelemetryCorrelationHttpModule" />
<add name="TelemetryCorrelationHttpModule" type="Microsoft.AspNet.TelemetryCorrelation.TelemetryCorrelationHttpModule, Microsoft.AspNet.TelemetryCorrelation" preCondition="integratedMode,managedHandler" />
</modules>
</system.webServer>
问题三：put delete请求，又出现了405（Method Not Allowed）
问题介绍及原因分析：
大家发现没有，问题二put提交，Request Method就是put，Delete提交，Request Method就是Delete。然而在这里统统都是OPTIONS。那么这个OPTIONS到底是个啥呢？
Preflighted Requests(预检请求)
Preflighted Requests是CORS中一种透明服务器验证机制。预检请求首先需要向另外一个域名的资源发送一个 HTTP OPTIONS 请求头，其目的就是为了判断实际发送的请求是否是安全的。
下面的2种情况需要进行预检：
1、简单请求，比如使用Content-Type 为 application/xml 或 text/xml 的 POST 请求；
2、请求中设置自定义头，比如 X-JSON、X-MENGXIANHUI 等。
原来put、delete请求如果头部设置了XMLHttpRequest.setRequestHeader("Content-Type", "application/json")之前还发送了一次预检请求。
解决方案：
既然是多的一次请求，那我们就在服务端过滤掉就好了。
Global.asac添加以下方法就行了
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing; namespace webapi
{
public class WebApiApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
GlobalConfiguration.Configure(WebApiConfig.Register);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
} protected void Application_BeginRequest()
{
if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
{
Response.End();
}
}
}
}
到这里，ajax跨域实现RestFul请求，已经是能正常运行了。剩下的只是安全校验、身份认证、异常记录等，就能放到生产环境了。这里就不多做描述了，毕竟博主还是上班族...
如有错误，欢迎大家指正~
ajax请求基于restFul的WebApi(post、get、delete、put)的更多相关文章
- C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件（Form Controls） C#串口通信程序
C#中缓存的使用 缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可: <%@ Outp ...
- Django框架之models和不依赖Qquery的ajax请求
一.models表字段 1)class表字段的创建 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) ...
- Ajax请求数据与删除数据后刷新页面
1.ajax异步请求数据后填入模态框 请求数据的按钮(HTML) <a class="queryA" href="javascript:void(0)" ...
- WebApi系列~基于RESTful标准的Web Api
微软的web api是在vs2012上的mvc4项目绑定发行的,它提出的web api是完全基于RESTful标准的,完全不同于之前的(同是SOAP协议的)wcf和webService,它是简单,代码 ...
- WebApi系列~基于RESTful标准的Web Api 转载 https://www.cnblogs.com/lori/p/3555737.html
微软的web api是在vs2012上的mvc4项目绑定发行的,它提出的web api是完全基于RESTful标准的,完全不同于之前的(同是SOAP协议的)wcf和webService,它是简单,代码 ...
- 让webapi只接受ajax请求
为了测试先做一个简单的webapi,直接用新建项目时默认的就可以了. 在浏览器中测试request get,得到结果 然后再项目中新建一个AjaxOnly的类 AjaxOnly继承Acti ...
- 让python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE等请求
这两天在用python的bottle框架开发后台管理系统,接口约定使用RESTful风格请求,前端使用jquery ajax与接口进行交互,使用POST与GET请求时都正常,而Request Meth ...
- WebAPI学习日记一：Ajax请求传递参数遇到的问题
首先,本人大学刚毕业,想把自己学习的一些东西记录下来,也是和大家分享,如有不对之处还请多加指正.声明:但凡是我博客里的文章均是本人实际操作遇到的例子,不会随便从网上拷贝或者转载,本着对自己和观众负责的 ...
- 基于jquery，ajax请求及自我终止的函数封装。
场景描述: 在我们平时的开发过程中,经常会遇到这样的情况.在搜索功能中进行模糊搜索或者联想关联. 这就要我们每次对输入框中的数据进行改动时,都要发送一次请求.当在短时间内多次操作改动时,问题就出现了. ...
随机推荐
- 巧用 即刻搜索事件 input propertychange 监听输入框字数
实时监听输入框的字数,大于200时,不再输入. 即时搜索: propertychange(ie)和input事件(常用) input是标准的浏览器事件,一般应用于input元素,当input的valu ...
- 语句调优基础知识-set statistics time on
set statistics time on --清空缓存数据 dbcc dropcleanbuffers go --清空缓存计划 dbcc freeproccache go set statisti ...
- Django之--网页展示Hello World!
上一篇:Django的安装启动完毕后,本文来试下hello world的效果~ 好吧,又开始了喜闻乐见的Hello World环节,本文使用Linux环境演示(Windows太麻烦). [root@p ...
- CENTOS7错误:Cannot find a valid baseurl for repo: base/7/x86_6
CENTOS7错误:Cannot find a valid baseurl for repo: base/7/x86_6 解决办法: 1.进入/etc/sysconfig/network-script ...
- Windows Server 2016-配置Windows Defender防病毒排除项
Windows Server 2016 的计算机上的 Windows Defender 防病毒自动注册你在某些排除项,由你指定的服务器角色定义. 这些排除项不会显示在Windows 安全中心应用中所示 ...
- CSipIm断网重连崩溃原因分析
断网重连之后的操作流程 拨打电话 ->调用SipService.makeCallOptions(),先重启一遍SipService保证PjSipService的各参数正常,尤其是create参数 ...
- js获取当前页面url网址信息
js如何准确获取当前页面url网址信息 在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结. 下面我们举例一个URL,然后获得它的各个 ...
- CentOS TinyProxy http(s)上网代理及置代理上网的方法
http://blog.csdn.net/fwj380891124/article/details/42168683 http://computer.uoh.edu.cn/linux/2159.htm ...
- Nginx 安装配置
Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. ...
- 发现一种写法，类似callback&&callback()
与callback&&callback()异曲同工 return data && { title: `To-do (${data.length})`, componen ...