Heim >Web-Frontend >js-Tutorial >Native JS implementiert domänenübergreifende Ajax-Request-Flask-Antwortinhalte (grafisches Tutorial)

Native JS implementiert domänenübergreifende Ajax-Request-Flask-Antwortinhalte (grafisches Tutorial)

亚连Original: 2018-05-22 09:37:591634Durchsuche

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(&#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-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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ajax-Front-End- und Back-End-Methoden zur domänenübergreifenden Anforderungsverarbeitung (grafisches Tutorial)Nächster Artikel：Ajax-Front-End- und Back-End-Methoden zur domänenübergreifenden Anforderungsverarbeitung (grafisches Tutorial)

In Verbindung stehende Artikel

Mehr sehen