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

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

亚连
リリース: 2018-05-22 09:37:59
オリジナル
1608 人が閲覧しました

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

主な技術:

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

実装コード:

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

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+

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

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

AJAXのXMLを例付きで解説

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート