目錄

前言：

?1、創建MVC項目

?2、修改返回格式

?3、創建【Web API】控制器

?4、創建【HttpGet】訪問接口

?5、創建【HttpPost】訪問接口

?6、測試接口：

?6.1、執行：點擊【調試】，【開始執行(步調試)】

?6.2、使用【Postman】進行測試（需要自行下載）

?6.3、訪問路徑拼接方式：

?6.4、HttpGet請求測試(可以在瀏覽器中測試即可)

?6.5、HttpPost請求測試(必須使用模擬post請求的工具)

7、跨域配置?

8、 測試【Ajax】的Get請求

9、測試【Ajax】的Post請求

---

前言：

本章節主要針對Web API進行基礎教學以及強化訓練，并對跨域操作做出詳細的介紹與添加跨域配置信息，可以通過本文學會創建【跨域接口的編寫】，風格采用【restfull】風格

RESTful發展背景及簡介
網絡應用程序，分為前端和后端兩個部分。當前的發展趨勢，就是前端設備層出不窮（手機、平板、桌面電腦、其他專用設備…）。因此，必須有一種統一的機制，方便不同的前端設備與后端進行通信。這導致API構架的流行，甚至出現"APIFirst"的設計思想。RESTful API是目前比較成熟的一套互聯網應用程序的API設計理論。

REST（Representational State Transfer）表述性狀態轉換，REST指的是一組架構約束條件和原則。 如果一個架構符合REST的約束條件和原則，我們就稱它為RESTful架構。REST本身并沒有創造新的技術、組件或服務，而隱藏在RESTful背后的理念就是使用Web的現有特征和能力， 更好地使用現有Web標準中的一些準則和約束。雖然REST本身受Web技術的影響很深， 但是理論上REST架構風格并不是綁定在HTTP上，只不過目前HTTP是唯一與REST相關的實例。

?這個世界上只有一種真正的英雄主義：

認清生活的真相，并且仍然熱愛它。難道向上攀爬的那條路，不是比站在頂峰更讓人心潮澎湃嗎？

提供在線jQuery訪問地址：【https://code.jquery.com/jquery-3.1.1.min.js】?

1、創建MVC項目

依次選擇【C#】【Windows】【Web】，下拉至【ASP.NET Web應用程序】并選擇，點擊【下一步】

?輸入項目名稱，點擊【創建】

?選擇【Web API】，并取消【為HTTPS】配置。點擊【創建】

?創建效果：

?2、修改返回格式

打開【App_Start】文件夾中的【WebApiConfig.cs】文件并添加如下配置：

【?GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();】

【routeTemplate: "api/{controller}/{action}/{id}",】

?3、創建【Web API】控制器

在【Controllers】文件夾上點擊【鼠標右鍵】,選擇【控制器】，并依次選擇【Web API】【Web API 2 控制器-空】，點擊【添加】

?添加控制器的名稱【Test】，默認后綴【Controller】

?創建效果：

?4、創建【HttpGet】訪問接口

編碼如下:

/// <summary> /// Get請求接口 /// </summary> /// <returns></returns> [HttpGet] public object GetInfo() {Dictionary<string, object> map = new Dictionary<string, object>();map.Add("code",200);map.Add("message","成功Get請求");map.Add("result","祝大家功成名就。");return map; }

編碼位置如下:

?5、創建【HttpPost】訪問接口

編碼如下：

/// <summary> /// Post請求接口 /// </summary> /// <returns></returns> [HttpPost] public Object GetPostInfo() {Dictionary<string, object> map = new Dictionary<string, object>();map.Add("code", 200);map.Add("message", "成功Post請求");map.Add("result", "祝大家功成名就。");return map; }

?編碼位置如下：

?6、測試接口：

6.1、執行：點擊【調試】，【開始執行(步調試)】

?啟動成功：【點擊API】

?接口地址：

?6.2、使用【Postman】進行測試（需要自行下載）

?6.3、訪問路徑拼接方式：

【http://localhost:端口號/api/{控制器名稱}/{方法名稱}】

6.4、HttpGet請求測試(可以在瀏覽器中測試即可)

【http://localhost:端口號d/api/Test/GetPostInfohttp://localhost:5833/api/Test/GetPostInfohttp://localhost:5833/api/Test/GetInfohttp://localhost:5833/api/Test/GetPostInfohttp://localhost:端口號d/api/Test/GetPostInfo】

?

【Postman】訪問:

?6.5、HttpPost請求測試(必須使用模擬post請求的工具)

必須Postman或其它工具訪問：

7、跨域配置?

只需要在【Web.config】的 <system.webServer>標簽內添加如下編碼即可：

<httpProtocol><customHeaders><add name="Access-Control-Allow-Origin" value="*" /><add name="Access-Control-Allow-Headers" value="*" /><add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /></customHeaders></httpProtocol>

8、 測試【Ajax】的Get請求

HTML代碼：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script>$(document).ready(function () {$.ajax({url: "http://localhost:5833/api/Test/GetInfo", type: "Get", dataType: "json",success: function (data) {document.write(data["code"]);document.write("<hr/>");document.write(data["message"]);document.write("<hr/>");document.write(data["result"]);}});}); </script>

效果：

?9、測試【Ajax】的Post請求

HTML編碼：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script>$(document).ready(function () {$.ajax({url: "http://localhost:5833/api/Test/GetPostInfo", type: "Post", dataType: "json",success: function (data) {document.write(data["code"]);document.write("<hr/>");document.write(data["message"]);document.write("<hr/>");document.write(data["result"]);}});}); </script>

效果：

?第四章【四、ASP.NET Web API應用程序與跨域操作】完結。

【一、控制器與視圖：https://laoshifu.blog.csdn.net/article/details/120126288】

【二、數據傳遞：https://laoshifu.blog.csdn.net/article/details/120127320】

【三、表單與文件上傳：https://laoshifu.blog.csdn.net/article/details/120130566】

【四、ASP.NET Web API應用程序與跨域操作：https://laoshifu.blog.csdn.net/article/details/120160728】

【五、HttpClient接口解析：https://laoshifu.blog.csdn.net/article/details/120332379】

總結

以上是生活随笔為你收集整理的ASP.NET MVC (四、ASP.NET Web API应用程序与跨域操作)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。