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

ネイティブ JS は Ajax クロスドメイン要求フラスコ応答コンテンツを実装します (グラフィックチュートリアル)

亚连

リリース： 2018-05-22 09:37:59

オリジナル

1588 人が閲覧しました

この記事では、主に Ajax のクロスドメインリクエストフラスコの応答コンテンツの JS 実装について詳しく紹介します。興味のある方は参考にしてください。Ajax のメソッドは優れており、Web サイトは高級感があります。 JS クロスドメイン Ajax は実装できないここでは、フラスコ側でレスポンスを制御できる必要があるという前提で解決策について説明します。

主な技術:

サーバーの対応するヘッダーを変更して、任意のドメイン名に対応できるようにします。そして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、postを使用して完了できますが、何もすることはできません。現在、フロントエンドとバックエンドの両方を書いているので、この状況はしばらく考慮しません。

上記は私があなたのためにまとめたものです。

jQuery+

ajaxjsonの読み込みとソート方法を詳しく解説

jQuery+Ajaxでユーザー名を検証

AJAXのXMLを例付きで解説

以上がネイティブ JS は Ajax クロスドメイン要求フラスコ応答コンテンツを実装します (グラフィックチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。