ajax跨域系列--web api方式跨域

上一节讲到如何使用jsonp进行跨域请求api，这次我们用一些微软新的框架解决这个问题

web api是微软继web service ,wcf推出的新一代的服务提供框架

不多说了，用用看

首先一个基类，所有的controller继承此基类，里面有个无返回值的方法Options

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
public class ApiController : Controller
{
public string Options()
{
return null; // HTTP 200 response with empty body

}
}
}

我们的具体调用的action:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication1.Filter;

namespace MvcApplication1.Controllers
{

public class HomeController : ApiController
{
public ActionResult Index()
{
return View();
}

public JsonResult Get()
{
IList<DataModel> ls=new List<DataModel>(){
new DataModel{
name="kong",
age=25
},
new DataModel{
name="wang",
age=26
}
};
return Json(ls, JsonRequestBehavior.AllowGet);
}
}

public class DataModel
{
public string name { get; set; }
public int age { get; set; }
}
}

在根目录下配置web.config里面的system.webServer节点，新增

<pre name="code" class="html"> <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" />
</customHeaders>
</httpProtocol>

-------------------------------------------以上是webapi项目下面是调用者的前端页面：

<pre name="code" class="javascript"><script type="text/javascript">
$(function () {
$.ajax({
type: "get",
async: false,
url: "http://localhost:8/home/get",
dataType: "json",
success: function (json) {
var html = '<li class="swiper-slide tabNavActive">推荐</li>';
$.each(json, function () {
html += '<li class="swiper-slide">' + this.name + '</li>';
});
$("#floor").html(html);
},
error: function () {
alert('fail');
}
});
});
</script>

测试OK。