- 前端:ASP.NET MVC
- 后端:.NET WebAPI
在系统中,老是有客户抱怨,某某地方修改不了啊、某某记录删不掉啊、……
经过 N 次测试,发现问题主要集中在 Restful 的 PUT 或 DELETE 请求的时候。
但是 Chrome 貌似全部功能都是可用的,看来,是浏览器支持的问题,简单记录一下解决方法吧,懒得去统计哪些浏览器不支持了。
先说一句,如果是 Java 的童鞋,如果使用的是 SpringMVC,那恭喜你了,该框架已经带了该兼容方法的支持了,具体的,可以自行百度,也可以看这里。
方案:客户端统一 POST 提交,API 端重写 HTTP Method
首先,继承 DelegatingHandler
,重写方法,代码如下:
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Threading;
using System.Threading.Tasks;
namespace Test.Web
{
/// <summary>
/// 兼容不支持 PUT/DELETE 方法的浏览器
/// </summary>
public class TestHTTPHandler : DelegatingHandler
{
protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
{
IEnumerable<string> methods;
// 在 ajax 的 header 中添加 _method 标记,标明真实的请求方法
// 如果没有该标记或为空,就使用原本的请求方法
if (request.Headers.TryGetValues("_method", out methods))
{
var method = methods.First();
if (!string.IsNullOrWhiteSpace(method))
{
request.Method = new HttpMethod(method);
}
}
return base.SendAsync(request, cancellationToken);
}
}
}
然后,在 Global.asax 中,注册该方法,代码如下:
// …… 其它 using
using System.Web.Http;
void Application_Start(object sender, EventArgs e)
{
// …… 其它代码 ……
// 兼容不支持 PUT/DELETE 方法的浏览器
GlobalConfiguration.Configuration.MessageHandlers.Add(new TestHTTPHandler());
}
最后,在 Javascript 中,发送 ajax 请求如下(以 jQuery 为例):
// POST 请求
$.post('http://api.xxxx.com/xxxx', data, function (result) {
// 业务处理逻辑
});
// PUT 请求
$.ajax({
url: 'http://api.xxxx.com/xxxx',
type: 'POST', // 统一 POST 请求
headers: { _method: 'PUT' }, // 标明真实的 PUT 方法
data: data,
success: function (result) {
// 业务处理逻辑
}
});
// DELETE 请求
$.ajax({
url: 'http://api.xxxx.com/xxxx/{id}',
type: 'POST', // 统一 POST 请求
headers: { _method: 'DELETE' }, // 标明真实的 DELETE 方法
success: function (result) {
// 业务处理逻辑
}
});
至此,全部功能实现完毕。