今天在上班的時候，被坐在旁邊項目經理叫過去問了一個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请求，跨域小坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。