[记录]js跨域调用mvc ActionResult扩展

背景

  最近2个项目中都用到了js跨域访问的知识,2个项目都需要主站与各个分站之间进行数据交互、状态同步等相关操作。浏览器本身是不允许进行跨域访问,在MVC中我们可以扩展一个方法来实现这个功能。在此大家可以参考这两篇文章:http://www.cnblogs.com/lori/archive/2012/12/14/2817615.html,博问:http://q.cnblogs.com/q/53210/

代码实现

首先我们来写一个JsonpResult来扩展mvc本身自带的JsonResult,代码:

/// <summary>
    /// 返回jsonp上下文
    /// </summary>
    public class JsonpResult : JsonResult
    {
        const string CALLBACKNAME = "jsonp";
        /// <summary>
        /// 复写渲染视图方法
        /// </summary>
        /// <param name="context"></param>
        public override void ExecuteResult(ControllerContext context)
        {
            if (context == null)
            {
                throw new ArgumentNullException("当前请求上下文出错");
            }
            if ((JsonRequestBehavior == JsonRequestBehavior.DenyGet)
                && String.Equals(context.HttpContext.Request.HttpMethod, "GET"))
            {
                throw new InvalidOperationException("Jsonp只能是GET请求");
            }
            var response = context.HttpContext.Response;
            if (!String.IsNullOrEmpty(ContentType))
            {
                response.ContentType = ContentType;
            }
            else
            {
                response.ContentType = "application/json";
            }
            if (ContentEncoding != null)
            {
                response.ContentEncoding = this.ContentEncoding;
            }
            if (Data != null)
            {
                String buffer;
                var request = context.HttpContext.Request;
                var serializer = new JavaScriptSerializer();
                if (request[CALLBACKNAME] != null)
                    buffer = String.Format("{0}({1})", request[CALLBACKNAME], serializer.Serialize(Data));
                else
                    buffer = serializer.Serialize(Data);
                response.Write(buffer);
            }
        }
    }

扩展完成以后我在mvc项目中编写了一个返回JsonpResult类型的action:

public JsonpResult Jsonp()
        {
            JsonpResult result = new JsonpResult()
            {
                 Data = new { success =true, message ="调用成功"},
                 JsonRequestBehavior = JsonRequestBehavior.AllowGet
             };
             return result;//反回一个jsonp(msg)对象
        }

完成以后,新建一个mvc项目,通过js进行跨域访问,访问格式为:

<script type="text/javascript">
    $(function () {
        $.getJSON("http://localhost:8000/jsonp/Jsonp?jsonp=?", {}, function (data) {
            alert(data.message);
        });
    })
</script>

程序运行,跨域调用成功:

[记录]js跨域调用mvc ActionResult扩展_第1张图片

下面试一下通过跨域传参数,看看是否能接收到:

分站js代码:

<script type="text/javascript">
    $(function () {
        $.getJSON("http://localhost:8000/jsonp/Jsonp?jsonp=?", {name:"northwolf"}, function (data) {
            alert(data.message);
        });
    })
</script>

主站action代码:

public JsonpResult Jsonp(string name)
        {
            JsonpResult result = new JsonpResult()
            {
                 Data = new { success =true, message ="接收到参数name="+name},
                 JsonRequestBehavior = JsonRequestBehavior.AllowGet
             };
             return result;//反回一个jsonp(msg)对象
        }

运行效果:

[记录]js跨域调用mvc ActionResult扩展_第2张图片

总结:

  跨域请求数据我们只需实现以上JsonpResult的扩展类型,同时在跨域请求的时候地址的时候加上jsonp=?比不可少的参数,即可实现改功能。

你可能感兴趣的:(action)