ホームページ > 記事 > ウェブフロントエンド > ネイティブ JS は Ajax クロスドメイン要求フラスコ応答コンテンツを実装します (グラフィック チュートリアル)
ネイティブ JS は Ajax クロスドメイン要求フラスコ応答コンテンツを実装します (グラフィック チュートリアル)
- 亚连オリジナル
- 2018-05-22 09:37:591527ブラウズ
この記事では、主に 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+jQuery+Ajaxでユーザー名を検証AJAXのXMLを例付きで解説以上がネイティブ JS は Ajax クロスドメイン要求フラスコ応答コンテンツを実装します (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。