In diesem Artikel wird hauptsächlich die JS-Implementierung des Ajax-Cross-Domain-Request-Flask-Antwortinhalts im Detail vorgestellt. Interessierte Freunde können darauf verweisen.
Die Ajax-Methode ist gut und die Website fühlt sich ähnlich an Es ist High-End, aber aufgrund der Einschränkungen von Js kann domänenübergreifendes Ajax nicht implementiert werden. Die Voraussetzung ist, dass Sie in der Lage sein müssen, die Reaktion auf der Flaschenseite zu steuern.
Haupttechnologie:
Ändern Sie den entsprechenden Header des Servers, sodass er jedem Domänennamen entsprechen kann. und legt den Antwortheader so fest, dass er der POST-Methode entsprechen kann.
Implementierungscode:
Fügen Sie hier zuerst den Flaschencode ein:
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-Testcode:
<!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>Der Antwortheader kann nicht gesteuert werden
Für In diesem Fall kann die Get-Anfrage mit jquery vervollständigt werden, Sie können jedoch nichts gegen die Post tun. Derzeit schreibe ich sowohl das Frontend als auch das Backend, daher werde ich diese Situation vorerst nicht berücksichtigen.
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
jQuery+ajaxDetaillierte Erklärung zum Lesen von JSON und Sortieren
jQuery+Ajax um den Namen des Benutzers zu überprüfen
Eine Beispielerklärung von XML in AJAX
Das obige ist der detaillierte Inhalt vonNative JS implementiert domänenübergreifende Ajax-Request-Flask-Antwortinhalte (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
