[记录]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代码:
<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)对象
}
运行效果:

总结:
跨域请求数据我们只需实现以上JsonpResult的扩展类型,同时在跨域请求的时候地址的时候加上jsonp=?比不可少的参数,即可实现改功能。
[记录]js跨域调用mvc ActionResult扩展的更多相关文章
- js跨域调用mvc ActionResult扩展
背景 最近2个项目中都用到了js跨域访问的知识,2个项目都需要主站与各个分站之间进行数据交互.状态同步等相关操作.浏览器本身是不允许进行跨域访问,在MVC中我们可以扩展一个方法来实现这个功能.在此大家 ...
- 如何通过js跨域调用ASP.NET Web API (请问如何实现在javascript中通过http get的方式跨域调用ASP.NET Web API?)
客户端js无需任何专门设置,使用通常的ajax调用即可: $.ajax({ url: '跨域URL', type: 'get', dataType: 'json', success: function ...
- 还在问跨域?本文记录js跨域的多种实现实例
前言 众所周知,受浏览器同源策略的影响,产生了跨域问题,那么我们应该如何实现跨域呢?本文记录几种跨域的简单实现 前期准备 为了方便测试,我们启动两个服务,10086(就是在这篇博客自动生成的项目,请戳 ...
- JS跨域调用之document.domain--相同基础域名页面之间的调用
利用document.domain 实现跨域: 前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain进行跨域 Javascript出于对 ...
- 服务器端解决JS跨域调用问题
一. 使用JSONp方式调用 不做详细讲解,可以参考jq文档 二. 服务端配置 修改Web.config 文件 <system.webServer> <modules runAllM ...
- HTML页面通过JS跨域调用,子传父
父页面:a.html 代码: <html> <head> <script type="text/javascript"> function te ...
- jquery Ajax跨域调用WebServices方法
由于公司需要开发一个手机页面,想提供给同事直接在手机上可以查询SAP资料.数据需要使用js调用webserver来获取. 因为初次使用Jquery调用Webserver,所以期间并不顺利.测试调用We ...
- ajax——CORS跨域调用REST API 的常见问题以及前后端的设置
RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...
- AJAX跨域调用ASP.NET MVC或者WebAPI服务的解决方案
问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况. 重现方式 使用模板创建一个最简单的ASP.NET Web ...
随机推荐
- jsp jsp九个内置对象
每个JSP页面在第一次被访问的时候,WEB容器都会把请求交给JSP引擎(即一个JAVA)程序.JSP引擎先将JSP翻译成一个_jspServlet实质也是一次servlet,然后按照 Servl ...
- webpack-dev-server将文件产出到指定目录
默认情况下webpack-dev-server是将文件产出到内存中,写了一个插件 将文件产出到指定目录, 比较简易啊 哈哈哈 使用代码如下 const WebpackDevServerOutput = ...
- Translate Exercises(3) 科技英语翻译
[1] CMOS logic is a newer technology, based on the use of complementary MOS transistorsto perform lo ...
- React Native笔记整理
判断一个APP页面时原生还是H5:http://www.cnblogs.com/sonice-cinsy/p/5671324.html 写给移动开发者的React Native指南:http://bl ...
- HTTP Header之Content-Type
HTTP Header之Content-Type 目录 1. HTTP Header 2. 文件请求和接口请求 3. 几种 Content-Type 3.1 application/x-www-f ...
- C#foreach的用法
static void Main(string[] args) { int[] a = new int[5] { 1, 2, 3, 4, 5 }; ...
- Python 日志管理封装
封装python中的logging方便日常使用 class Logger(object): level_mapping = { 'debug': logging.DEBUG, 'info': logg ...
- matlab与vs混合编程/matlab移植
前言 项目算法中包含了不同编译工具的代码,分别是matlab和VS,需要将二者结合起来,统一在同一个系统工作,此时就要用到matlab和vs混合编程. 在matlab中将.m文件编译生成库文件等供外部 ...
- liunx用户管理的基本命令
1.passwd 修改用户密码 2.useradd 用户组名 增加用户组 3.su 用户名 切换用户名 4.usermod 用户更改 5.userdel 用户删除
- PHP webservice初探
背景:在最近的开发中,为了解决公司内部系统与外部系统的对接,开始接触到了webservice接口,外部公司提供接口供我们调用,已达到数据同步的目的,因此有必要普及一下web service的知识了! ...