JS は Ajax クロスドメイン要求フラスコ応答コンテンツを実装します-jsチュートリアル-php.cn

JS は Ajax クロスドメイン要求フラスコ応答コンテンツを実装します

小云云

リリース： 2018-01-03 16:26:12

オリジナル

1777 人が閲覧しました

Ajax 方式は優れており、Web サイトは高級感があります。ただし、Js の制限により、クロスドメイン Ajax は実装できません。ここでは、制御できる必要があるという前提で説明します。フラスコ側の反応。この記事では、主に Ajax のクロスドメインリクエストフラスコの応答コンテンツの JS 実装について詳しく紹介します。興味のある方は参考にしていただければ幸いです。

主な技術:

サーバーの対応するヘッダーを変更して、任意のドメイン名に対応できるようにします。そしてPOSTメソッドに対応できるようにレスポンスヘッダを設定します。

実装コード:

最初にフラスココードをここに置きます:

from flask import make_response
@app.route(&#39;/test&#39;,methods=[&#39;get&#39;,&#39;post&#39;])
def Test():
 if request.method==&#39;GET&#39;:
  rst = make_response(&#39;aaa&#39;)
  rst.headers[&#39;Access-Control-Allow-Origin&#39;] = &#39;*&#39; #任意域名
  return rst
 else:
  rst = make_response(&#39;bbb&#39;)
  rst.headers[&#39;Access-Control-Allow-Origin&#39;] = &#39;*&#39;
  rst.headers[&#39;Access-Control-Allow-Methods&#39;] = &#39;POST&#39; #响应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 を使用して完了できます、ポスト、何もできません。

もう学びましたか？急いで試してみてください。