首頁 > web前端 > js教程 > 原生JS實作Ajax跨域請求flask回應內容(圖文教學)

原生JS實作Ajax跨域請求flask回應內容(圖文教學)

亚连
發布: 2018-05-22 09:37:59
原創
1608 人瀏覽過

這篇文章主要為大家詳細介紹了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,無能為力。目前前後端均我一人編寫,暫不考慮慮此情況。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

jQuery ajax讀取json並排序方法詳解

jQuery Ajax驗證使用者名

關於AJAX中XML 的實例講解

#

以上是原生JS實作Ajax跨域請求flask回應內容(圖文教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板