Ajax请求，跨域小坑

今天在上班的时候，被坐在旁边项目经理叫过去问了一个Ajax请求跨域的问题，一开始没理解清楚也还有对这个没有理解的透，后面被打击的要死。

当时的需求是需要测试一个已发布的api接口，需要在本地写测试程序去测试接口。

当时的看到代码大概是这个样子

$(document).ready(function () {
var args = {
method: "Post",
url: "Test",
data: ({ "id": "FB850EE4-48EE-4502-BFE2-736B02899224" })
// url: "http://xxxxxx/xxxx/api/agency/GetOne",
};
$.ajax(args).done(function (data) {});
});

当时我犯的第一个错误，没有理解跨域JSONP的概念

JSONP使用只能在GET方式下才能生效，dataType修改成post在Jquery也会转成GET方式，然而这个接口不支持GET方式请求。

  var args = {method: "POST",//  url: "Test",dataType: 'JSONP',data: ({ "id": "FB850EE4-48EE-4502-BFE2-736B02899224" }),url: "http://xxxxxxx/xxxx/api/agency/GetOne",};$.ajax(args).done(function (data) {});

所以就在后面看到了类似于这样的代码，修改成用WebClient服务器发送POST请求跨域请求的问题。

  public ActionResult Test(string id){var url = "http://xxxxxxx/xxxx/api/agency/GetOne";System.Net.WebClient wCient = new System.Net.WebClient();wCient.Headers.Add("Content-Type", "application/x-www-form-urlencoded");byte[] postData = System.Text.Encoding.ASCII.GetBytes("id="+ id);byte[] responseData = wCient.UploadData(url, "POST", postData);string returnStr = System.Text.Encoding.UTF8.GetString(responseData);//返回接受的数据 return Json(new {  rows = returnStr }, JsonRequestBehavior.AllowGet);}

关于AJAX相关的例子已经很多了，在这里附上一个简单封装过得例子

base类

var base = {/*** 遮罩层加载* @returns {} */ajaxLoading: function() {$("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body");$("<div class=\"datagrid-mask-msg\"></div>").html("正在处理，请稍候...").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });},/*** 遮罩层关闭* @returns {} */ajaxLoadEnd: function() {$(".datagrid-mask").remove();$(".datagrid-mask-msg").remove();},/*** * @param {} args ajax参数* @param {} callback 回调函数* @param {} isShowLoading 是否需要加载动态图片* @returns {} */ajax: function(args, callback, isShowLoading) {//采用jquery easyui loading css效果if (isShowLoading) {base.ajaxLoading();}args.url = args.url;args = $.extend({}, { type: "POST", dataType: "json" }, args);$.ajax(args).done(function(data) {if (isShowLoading) {base.ajaxLoadEnd();}if (callback) {callback(data);}}).fail(function() {if (isShowLoading) {base.ajaxLoadEnd();} else {window.top.topeveryMessage.alert("提示", "操作失败");}});}
}

css

.datagrid-mask {position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.3;filter: alpha(opacity=30);display: none;
}.datagrid-mask-msg {position: absolute;top: 50%;margin-top: -20px;padding: 10px 5px 10px 30px;width: auto;height: 40px;border-width: 2px;border-style: solid;display: none;
}.datagrid-mask-msg {background: #ffffff url('../Img/loading.gif') no-repeat scroll 5px center;
}.datagrid-mask {background: #ccc;
}.datagrid-mask-msg {border-color: #D4D4D4;
}

方法调用

 base.ajax({type: "POST",url: "",//urlcontentType: "application/json",data: JSON.stringify({})}, function(row) {});

总结：沉下心来，不要太浮躁，每天进步一点点是成功的开始！

转载于:https://www.cnblogs.com/wuyongfu/p/7011215.html

Ajax请求，跨域小坑相关推荐

WebApp开发：ajax请求跨域问题的解决
WebApp开发:ajax请求跨域问题的解决参考文章: (1)WebApp开发:ajax请求跨域问题的解决 (2)https://www.cnblogs.com/code-style/p/42094 ...
解决ajax请求跨域,解决ajax请求跨域
跨域大部分需要通过后台解决,引起跨域的原因: 3个问题同时满足才可能产生跨域问题,即跨域(协议,主机名,端口号中有一个不同就产生跨域) 下面是解决方法方法一 // ajax请求跨域 /* *解决a ...
Ajax请求跨域问题
由于浏览器的同源策略,使得,AJAX请求只能发给同源的网址,否则就报错.除了架设服务器代理,如Nginx(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制: 一. ...
jq中ajax请求跨域,jquery+ajax实现跨域请求的方法
本文实例讲述了jquery+ajax实现跨域请求的方法.分享给大家供大家参考.具体实现方法如下: 说明:这里的dataType 为 "jsonp" :type 只能为 GET ...
nginx配置ajax请求跨域
首先通过mozilla文档了解跨域原理: web跨域的方式有几种,常见的方案有web服务后端代码层级解决与nginx配置层面解决,这里我以nginx配置层面为例. 一般浏览器跨域请求的时候会先发起op ...
jq中ajax请求跨域,用JQuery实现简单的Ajax跨域请求
前一阵发过一篇利用ExtJs的ScriptTagProxy实现Ajax跨域请求的文章,这几天看了一下Jquery,发现如果用JQuery中的getScript其实更简单(jquery 1.2.6版本) ...
利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...
ajax 跨域请求数据,JQuery Ajax执行跨域请求数据的解决方案
JQuery Ajax执行跨域请求数据的解决方案今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下原来的ajax请求如下: $.ajax( ...
ajax是如何实现跨域的,在JS中如何实现ajax与ajax的跨域请求
下面小编就为大家分享一篇原生JS实现ajax与ajax的跨域请求实例,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧一.原生JS实现ajax 第一步获得XMLHttpRequest对 ...

Ajax请求，跨域小坑

Ajax请求，跨域小坑相关推荐

最新文章

热门文章