首頁 > web前端 > js教程 > 主體

JS實作Ajax跨域請求flask回應內容

小云云
發布: 2018-01-03 16:26:12
原創
1786 人瀏覽過

Ajax方法好,網站感覺跟高大上,但由於Js的局限,跨域Ajax無法實現,這裡,講一下解決辦法,前提是需要能夠自己可以控制flask端的回應。本文主要為大家詳細介紹了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,無能為力。

大家學會了嗎?趕快動手嘗試。

相關推薦:

Ajax跨域請求COOKIE無法帶上的完美解決方案

實例詳解Ajax跨域請求的原理

實例講解AJAX跨域請求資料的四種方法

#

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

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