今天在上班的时候，被坐在旁边项目经理叫过去问了一个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:;
top:;
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: "",//url
contentType: "application/json",
data: JSON.stringify({})
}, function(row) {
});
总结：沉下心来，不要太浮躁，每天进步一点点是成功的开始！