JSONP——跨域請求(python)

一般來說,瀏覽器請求數據是遵循的同源請求策略,即前後端請求需要在同一個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>

然後自行可以根據數據結果類型進行處理。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章