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

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

亚连

Freigeben： 2018-05-22 09:37:59

Original

1618 Leute haben es durchsucht

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!