经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » C# » 查看文章
ajax请求基于restFul的WebApi(post、get、delete、put)
来源：cnblogs　　作者：生活不止编程　　时间：2018/12/7 9:38:10　　对本文有异议

近日逛招聘软件，看到部分企业都要求会编写、请求restFul的webapi。正巧这段时间较为清闲，于是乎打开vs准备开撸。

 

1.何为restFul？

restFul是符合rest架构风格的网络API接口。

rest是一种软件架构的编码风格,是根据网络应用而去设计和开发的一种可以降低开发复杂度的编码方式,并且可以提高程序的可伸缩性(增减问题)。

几种较为常见的操作类型：get(查询)、post(新增)、put(修改)、delete(删除)

 

2.restFul标准的WebApi搭建以及部署在iis上

在这里为了方便，使用的ef框架，在创建读/写控制器时直接引用了模型类

 

 

控制器直接帮我帮crud的方法都写好了，按照注释的请求规则，可直接使用。代码如下：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data;
  4. using System.Data.Entity;
  5. using System.Data.Entity.Infrastructure;
  6. using System.Linq;
  7. using System.Net;
  8. using System.Net.Http;
  9. using System.Web.Http;
  10. using System.Web.Http.Description;
  11. using webapi;
  13. namespace webapi.Controllers
  14. {
  15.     public class ProductsController : ApiController
  16.     {
  17.         private DtoolsEntities db = new DtoolsEntities();
  19.         // GET: api/Products
  20.         [HttpGet]
  21.         public IQueryable<Product> GetProduct()
  22.         {
  23.             return db.Product.OrderByDescending(p => p.AddDate).Take(10);
  24.         }
  26.         // GET: api/Products/5
  27.         [HttpGet]
  28.         [ResponseType(typeof(Product))]
  29.         public IHttpActionResult GetProduct(int id)
  30.         {
  31.             Product product = db.Product.Find(id);
  32.             if (product == null)
  33.             {
  34.                 return NotFound();
  35.             }
  37.             return Ok(product);
  38.         }
  40.         // PUT: api/Products/5  update 
  41.         [HttpPut]
  42.         [ResponseType(typeof(void))]
  43.         public IHttpActionResult PutProduct(int id, Product product)
  44.         {
  45.             if (!ModelState.IsValid)
  46.             {
  47.                 return BadRequest(ModelState);
  48.             }
  50.             if (id != product.Id)
  51.             {
  52.                 return BadRequest();
  53.             }
  54.             product.AddDate = DateTime.Now;
  55.             db.Entry(product).State = EntityState.Modified;
  57.             try
  58.             {
  59.                 db.SaveChanges();
  60.             }
  61.             catch (DbUpdateConcurrencyException)
  62.             {
  63.                 if (!ProductExists(id))
  64.                 {
  65.                     return NotFound();
  66.                 }
  67.                 else
  68.                 {
  69.                     throw;
  70.                 }
  71.             }
  73.             return StatusCode(HttpStatusCode.NoContent);
  74.         }
  77.         // POST: api/Products  
  78.         [HttpPost]
  79.         [ResponseType(typeof(Product))]
  80.         public IHttpActionResult PostProduct(Product product)
  81.         {
  82.             if (!ModelState.IsValid)
  83.             {
  84.                 return BadRequest(ModelState);
  85.             }
  86.             product.AddDate = DateTime.Now;
  87.             db.Product.Add(product);
  88.             db.SaveChanges();
  90.             return CreatedAtRoute("DefaultApi", new { id = product.Id }, product);
  91.         }
  93.         // DELETE: api/Products/5  
  94.         [HttpDelete]
  95.         [ResponseType(typeof(Product))]
  96.         public IHttpActionResult DeleteProduct(int id)
  97.         {
  98.             Product product = db.Product.Find(id);
  99.             if (product == null)
  100.             {
  101.                 return NotFound();
  102.             }
  104.             db.Product.Remove(product);
  105.             db.SaveChanges();
  107.             return Ok(product);
  108.         }
  110.         protected override void Dispose(bool disposing)
  111.         {
  112.             if (disposing)
  113.             {
  114.                 db.Dispose();
  115.             }
  116.             base.Dispose(disposing);
  117.         }
  119.         private bool ProductExists(int id)
  120.         {
  121.             return db.Product.Count(e => e.Id == id) > 0;
  122.         }
  123.     }
  124. }

 

每个控制器前根据类型最好指定[HttpGet]  [HttpPost]   [HttpPut]  [HttpDelete]，因为服务器是根据请求类型自动映射匹配控制器名称，加上特性，避免出错。

weiapi设置中指定json格式，避免数据类型异常

webapi的搭建基本没有问题了。接下来就是部署在iis上，这里不多做描述，不懂如何部署iis可点击这里 （会被揍吗？）

 

3.前台ajax请求页面的编写

  1. <!DOCTYPE html>
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <script src="js/jquery-3.3.1.js"></script>
  8.     <script type="text/javascript">
  9.  
  10.         //部署在iis上的webapi接口具体请求路径
  11.         var httpUrl = "http://192.168.0.142:8018/api/Products";
  13.         $(function () {
  14.             $.ajax({
  15.                 url: httpUrl,
  16.                 type: "GET",
  17.                 dataType: "json",
  18.                 success: function (data) {
  19.                     $.each(data, function (index, item) {
  20.                         var tr = $("<tr/>");
  21.                         $("<td/>").html(item["ProductName"]).appendTo(tr);
  22.                         $("<td/>").html(item["Brand"]).appendTo(tr);
  23.                         $("<td/>").html(item["ASIN"]).appendTo(tr);
  24.                         $("<td/>").html(item["SKU"]).appendTo(tr);
  25.                         $("<button id ='d' onclick='del(" + item["Id"] + ")'>").html("删除").appendTo(tr);
  26.                         $("<button id ='u' onclick='update(" + item["Id"] + ")'>").html("更新").appendTo(tr);
  27.                         tr.appendTo("#tab");
  28.                     });
  29.                 },
  30.                 error: function (XMLHttpRequest, textStatus, errorThrown) {
  31.                     alert(XMLHttpRequest + "," + textStatus + "," + errorThrown);
  32.                 }
  33.             });
  35.         });
  37.         //修改
  38.         function update(id) {
  39.             $.ajax({
  40.                 url: httpUrl + "?id=" + id,
  41.                 type: "Put",
  42.                 data: { "id": id, "ProductName": '男士领带', "Brand": '海澜之家', "ASIN": 'SAD498AE1', "SKU": '98DA7E9QE-SDAE', "StoreName": '海澜之家京东自营店' },
  43.                 dataType: "json",
  44.                 success: function (data) {
  45.                     location.reload();
  46.                 }
  47.             })
  48.         }
  50.         //新增
  51.         function add() {
  52.             $.ajax({
  53.                 url: httpUrl,
  54.                 type: "Post",
  55.                 data: { "ProductGuid": newGuid(), "ProductName": '男士衬衫', "Brand": '海澜之家', "ASIN": 'SAD498AE1', "SKU": '98DA7E9QE-SDAE', "StoreName": '海澜之家天猫旗舰店' },
  56.                 dataType: "json",
  57.                 success: function (data) {
  58.                     location.reload();
  59.                 }
  60.             })
  61.         }
  63.         //删除
  64.         function del(id) {
  65.             $.ajax({
  66.                 url: httpUrl+"/" + id,
  67.                 type: "Delete",
  68.                 dataType: "json",
  69.                 success: function (data) {
  70.                     location.reload();
  71.                 }
  72.             });
  73.         }
  75.         //生成guid
  76.         function newGuid() {
  77.             var guid = "";
  78.             for (var i = 1; i <= 32; i++) {
  79.                 var n = Math.floor(Math.random() * 16.0).toString(16);
  80.                 guid += n;
  81.                 if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
  82.                     guid += "-";
  83.             }
  84.             return guid;
  85.         }
  86.     </script>
  87. </head>
  88. <body>
  89.     <div>
  90.         <table id="tab">
  91.             <tr>
  92.                 <th>产品名称</th>
  93.                 <th>产品品牌</th>
  94.                 <th>ASIN</th>
  95.                 <th>SKU</th>
  96.             </tr>
  97.         </table>
  98.         <button id="add" onclick="add()">add</button>
  99.     </div>
  100.  
  101. </body>
  102. </html>

 

前端，后端代码都写完了。只剩测试了。想都不用想肯定会出问题的，因为涉及到了跨域请求等，接下来就为大家解决问题。

问题一：ajax请求，涉及到cors跨域，请求失败

　　问题介绍及原因分析：

　　　　　　　　   CORS是一个W3C标准，全称是”跨域资源共享”。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，基本上目前所有的浏览器都实现了CORS标准,其实目前几乎所有的浏览器ajax请求都是基于CORS机制的。
　　　　　　　　　跨域问题一般发生在Javascript发起AJAX调用，因为浏览器对于这种请求，所给予的权限是较低的，通常只允许调用本域中的资源，除非目标服务器明确地告知它允许跨域调用。所以，跨域的问题虽然是由浏览器的行为产生出来的，但解决的方法却　　　　　　　　　   是在服务端。因为不可能要求所有客户端降低安全性。

        解决方案：

                           web.config修改配置文件，使服务端支持跨域请求

 

  1. <system.webServer>
  2.     <httpProtocol>
  3.       <customHeaders>
  4.         <!--服务器端返回Response header  后接URL或*  表示允许-->
  5.         <add name="Access-Control-Allow-Origin" value="*" />
  6.         <add name="Access-Control-Allow-Headers" value="Content-Type" />
    　　　　 <!--支持请求的类型-->
  7.         <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  8.       </customHeaders>
  9.     </httpProtocol>
  10.     <handlers>
  11.       <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  12.       <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  13.     </handlers>
  14.   </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

  1.  <system.webServer>
  2.     <!--以下配置为了让IIS 7+支持Put/Delete方法-->
  3.     <httpProtocol>
  4.       <customHeaders>
  5.         <!--服务器端返回Response header  后接URL或*  表示允许-->
  6.         <add name="Access-Control-Allow-Origin" value="*" />
  7.         <add name="Access-Control-Allow-Headers" value="Content-Type" />
  8.         <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  9.       </customHeaders>
  10.     </httpProtocol>
  11.     <validation validateIntegratedModeConfiguration="false"/>
  12.     <handlers>
  13.       <!--移除WebDAV协议-->
  14.       <remove name="WebDAV"/>
  15.       <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  16.       <!--支持所有方式的请求-->
  17.       <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  18.     </handlers>
  19.     <!--IIS7/7.5上必须加这个配置,否则访问报错-->
  20.     <modules  runAllManagedModulesForAllRequests="true">
  21.       <!--移除WebDAV协议-->
  22.       <remove name="WebDAVModule"/>
  23.       <remove name="TelemetryCorrelationHttpModule" />
  24.       <add name="TelemetryCorrelationHttpModule" type="Microsoft.AspNet.TelemetryCorrelation.TelemetryCorrelationHttpModule, Microsoft.AspNet.TelemetryCorrelation" preCondition="integratedMode,managedHandler" />
  25.     </modules>
  26.   </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添加以下方法就行了

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Http;
  6. using System.Web.Mvc;
  7. using System.Web.Optimization;
  8. using System.Web.Routing;
  10. namespace webapi
  11. {
  12.     public class WebApiApplication : System.Web.HttpApplication
  13.     {
  14.         protected void Application_Start()
  15.         {
  16.             AreaRegistration.RegisterAllAreas();
  17.             GlobalConfiguration.Configure(WebApiConfig.Register);
  18.             FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
  19.             RouteConfig.RegisterRoutes(RouteTable.Routes);
  20.             BundleConfig.RegisterBundles(BundleTable.Bundles);
  21.         }
  23.         protected void Application_BeginRequest()
  24.         {
  25.             if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
  26.             {
  27.                 Response.End();
  28.             }
  29.         }
  30.     }
  31. }

 

到这里，ajax跨域实现RestFul请求，已经是能正常运行了。剩下的只是安全校验、身份认证、异常记录等，就能放到生产环境了。这里就不多做描述了，毕竟博主还是上班族...

如有错误，欢迎大家指正~

 

 

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

C#热门文章

  • NPOI的Excel的读取和写入
  • 事务在c#中的使用
  • 基于欧姆龙PLC#FinsTcp协议上位机通讯(二)-C#通讯模块开发
  • C# 当前 .NET SDK 不支持将 .NET Core 2.1 设置为目标。请将 .NET Core 2.0 或更低版本设置为目标，或使用支持 .NET Core 2.1 的 .NET SDK 版本。
  • C#读写Excel的几种方法
  • C#NPOI操作Excel，实现Excel数据导入导出（支持多个sheet）
  • c#中token的使用方法实例
  • OrderBy和OrderByDescending排序
  • C#中的modbus&nbsp;Tcp协议的数据抓取和使用解析
  • C#Aspose操作Word &amp; Excel简版（后会研究补充更多功能）

    • C#推荐文章

  • .NET 9 优化，抢先体验 C# 13 新特性
  • 使用C#爬取快手作者主页，并下载视频/图集(附源码及软件下载链接)
  • 聊一聊 C# 中让人惶恐的 Bitmap
  • C#/.NET/.NET Core技术前沿周刊 | 第 2 期（2024年8.19-8.25）
  • Elsa V3学习之Flowchart详解（上）
  • C#模拟键盘输入、键状态和监听键盘消息
  • 可以调用Null的实例方法吗？
  • SemanticKernel/C#：实现接口，接入本地嵌入模型
  • C#.Net筑基-解密委托与事件
  • C#/.NET/.NET Core优秀项目和框架2024年7月简报

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号