首先，創建一個mvc項目（包含webapi）,我們模擬一個場景
1）在項目的Controller 創建一個WeiXinApiController
public class WeiXinApiController : ApiController { WeiXinApiService service = new WeiXinApiService(); [System.Web.Http.HttpGet] public string GetCultureLevel() { //獲取文化程度的方法 AppResult result = service.GetCultureLevel(); //返回json格式 return JsonConvert.SerializeObject(result,Newtonsoft.Json.Formatting.Indented); } }
2) 在項目的Model中創建一個WeixinApiService的業務類
public class WeiXinApiService { public dynamic GetCultureLevel() { //定義一個key/value的集合 Dictionary<int, string> dicts = new Dictionary<int, string>(); dicts[1] = "初中"; dicts[2] = "高中"; dicts[3] = "中專"; dicts[4] = "大專"; dicts[5] = "本科"; dicts[6] = "碩士"; dicts[7] = "博士"; //聲明返回的數據類 AppResult result = new AppResult(); try { dynamic list = dicts; if (list.Count > 0) { result.Success = true; result.Message = "返回成功"; result.Data = list; } else { result.Success = false; result.Message = "返回失敗"; } } catch (Exception ex) { result.Success = false; result.Message = ex.Message; } return result; } }
3）在項目新建一個文件夾Common，創建一個AppResult類（返回數據類）
public class AppResult { public AppResult() { } public AppResult(bool bo, string msg) { _Success = bo; Message = msg; } private bool _Success = false; /// <summary> /// 調用是否成功 /// </summary> public bool Success { get { return _Success; } set { _Success = value; } } /// <summary> /// 返回的信息 /// </summary> public string Message { get; set; } /// <summary> /// 返回數據 /// </summary> public object Data { get; set; } }
4）運行起來，用瀏覽器訪問對應api控制器方法，是可以調用返回數據的
注：http://localhost:29303/api/Weixinapi/GetCultureLevel 路徑是我本地項目路徑
5）用外部調用這個api方法時，就會出現跨域訪問問題（調用時，保持項目是運行的）
我們用DW測試，引用一個jquery.min.js文件，調用jquery的ajax請求方法進行請求
html頁面
<body> <input type="button" value="調用測試" onClick="Test()"/> </body>
js 方法
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> var Test = function(){ $.ajax({ type: 'GET', url: 'http://localhost:29303/api/Weixinapi/GetCultureLevel', asyuc: true, jsonp: 'jsoncallback', success: function (datalist) { //將數據轉化為json格式 var dt = JSON.parse(datalist); //判斷是否返回成功 if (dt.Success) { console.log(dt); } else{ console.log(dt.Message); } } }); } </script>
出現跨域問題
那么如何解決跨域請求的問題呢？我在網上找到解決方法（添加支持跨域請求的屬性）
6）在項目添加文件夾Attributes，新建一個CrossSiteAttribute.cs類
/// <summary> /// 控制Api接口是否支持跨域調用 /// </summary> public class CrossSiteAttribute : System.Web.Http.Filters.ActionFilterAttribute { private const string Origin = "Origin"; /// <summary> /// Access-Control-Allow-Origin是HTML5中定義的一種服務器端返回Response header，用來解決資源（比如字體）的跨域權限問題。 /// </summary> private const string AccessControlAllowOrigin = "Access-Control-Allow-Origin"; /// <summary> /// originHeaderdefault的值可以使 URL 或 *，如果是 URL 則只會允許來自該 URL 的請求，* 則允許任何域的請求 /// </summary> private const string originHeaderdefault = "*";//"http://192.168.13.7:8002"; /// <summary> /// 該方法允許api支持跨域調用 /// </summary> /// <param name="actionExecutedContext"> 初始化 System.Web.Http.Filters.HttpActionExecutedContext 類的新實例。</param> public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext) { actionExecutedContext.Response.Headers.Add(AccessControlAllowOrigin, originHeaderdefault); } }
7）在原先api控制器的方法前加上這個屬性
public class WeiXinApiController : ApiController { WeiXinApiService service = new WeiXinApiService(); [System.Web.Http.HttpGet] [CrossSiteAttribute] public string GetCultureLevel() { //獲取文化程度的方法 AppResult result = service.GetCultureLevel(); //返回json格式 return JsonConvert.SerializeObject(result,Newtonsoft.Json.Formatting.Indented); } }
8）再次運行項目，用外部調用