原生JS實作Ajax跨域請求flask回應內容（圖文教學）
- 亚连原創
- 2018-05-22 09:37:591569瀏覽
這篇文章主要為大家詳細介紹了JS實現Ajax跨域請求flask響應內容，具有一定的參考價值，感興趣的小伙伴們可以參考一下
Ajax方法好，網站感覺跟高大上，但由於Js的局限，跨域Ajax無法實現，這裡，講一下解決辦法，前提是需要能夠自己可以控制flask端的回應。
主要技術：
修改伺服器對應的對應頭，使其可以對應任意網域。 and設定響應頭，使其能夠對應POST方法。
實作程式碼：
這裡先放flask程式碼：
from flask import make_response @app.route('/test',methods=['get','post']) def Test(): if request.method=='GET': rst = make_response('aaa') rst.headers['Access-Control-Allow-Origin'] = '*' #任意域名 return rst else: rst = make_response('bbb') rst.headers['Access-Control-Allow-Origin'] = '*' rst.headers['Access-Control-Allow-Methods'] = 'POST' #响应POST return rst
html測試程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="ss">test get</span>
<button onclick="getAjax()">click</button>
<p id="time">test post</p>
<input type="submit" value="click" onclick="getPostAjax()">
<script>
function getPostAjax() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function () {
if(xmlhttp.readyState=4 && xmlhttp.status ==200 ) {
document.getElementById("time").innerText = xmlhttp.responseText;
}
}
xmlhttp.open("POST","http://localhost:5000/test",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
#这句话可以发送post数据，没有此句post的内容无法传递
xmlhttp.send();
}
function getAjax() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function () {
if(xmlhttp.readyState==4 && xmlhttp.status == 200){
document.getElementById("ss").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://localhost:5000/test",true);
xmlhttp.send();
}
</script>
</body>
</html>無法控制回應頭
對於這種情況，get請求可以使用jquery完成，post，無能為力。目前前後端均我一人編寫，暫不考慮慮此情況。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
#以上是原生JS實作Ajax跨域請求flask回應內容（圖文教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn