一般來說,瀏覽器請求數據是遵循的同源請求策略,即前後端請求需要在同一個ip和端口才能允許獲取數據,爲了解決這個問題,利用前端的SCRIPT標籤屬性來解決。
方式一:
<srcript>
$(".send_ajax").click(function(){
//封裝一個kuayu_request方法,可以用來複用跨域函數
kuayu_request("https://www.baidu.com/send_ajax")
});
// 跨域函數
function kuayu_request(url){
var $script = $('<script>');//創建script標籤,是一個jquery對象
$script.attr("src", url); //添加src屬性
$("body").append($script); //添加到文檔中
$("body script:last").remove(); //然後在移除該標籤
}
</script>
方式二:基於jQuery的JSONP實現
<script>
$('.send_ajax').click(function(){
$.ajax({
url:"https://www.baidu.com/send_ajax" ,//示例地址,無實際用處
dataType:"jsonp", //跨域請求<script>
jsonp:'callbacks', //相當於路徑中回調函數路徑參數鍵值對的鍵
jsonpCallback:"func" //相當於路徑中回調函數路徑參數鍵值對的值,回調函數名
success:function(data){
//獲取數據後執行代碼
console.log(data)
};
});
});
</script>
示例:
jsonp: 'callbacks’就是定義一個存放回調函數的鍵,jsonpCallback是前端定義好的回調函數方法名,server端接受callback鍵對應值後就可以在其中填充數據打包返回。但是,jsonpCallback參數可以不定義,jquery會自動定義一個隨機名發過去,那前端就得用回調函數來處理對應數據了。利用jQuery可以很方便的實現JSONP來進行跨域訪問。
//項目1中html中前端js跨域部分代碼
<script>
$(".ajax_btn").click(function () {
$.ajax({
url:"http://127.0.0.1:8002/send_ajax/",
dataType:"jsonp",
jsonp:'callbacks',
success:function (data) {
alert(data);
console.log(data)
}
})
});
</script>
//項目2服務端中的視圖函數,即跨域請求的路徑
def send_ajax(request):
import json
func_name=request.GET.get("callbacks") #獲得回調函數的名字
dic={"k1":"v1"}
print("ok")
return HttpResponse("%s('%s')" %(func_name,json.dumps(dic)))
應用:跨域請求應用
如某合作單位提供如下獲取數據接口:http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403,請通過跨域請求獲取數據。由數據連接可以知對方已經定義了回調函數的函數名,即爲list,所以我們可以通過上述"基於jquery的JSONP的實現"的方式獲取數據,結果如下:
<script>
$(".ajax_btn").click(function () {
$.ajax({
// 改地址已經定義好了回調函數的名稱,所以只能用這個回調函數的名稱,不能前端自己定義
url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403", //目標地址
dataType:"jsonp", // 跨域請求
jsonp:"callback", //回調函數的鍵值對的鍵
jsonpCallback:"list"// 回調函數中鍵值對的值,也就是回調函數名稱
})
});
function list(result) {
console.log(result);
}
</script>
然後自行可以根據數據結果類型進行處理。