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

JS implementiert domänenübergreifende Ajax-Request-Flask-Antwortinhalte

小云云

Freigeben： 2018-01-03 16:26:12

Original

1755 Leute haben es durchsucht

Die Ajax-Methode ist gut und die Website fühlt sich hochwertig an. Aufgrund der Einschränkungen von Js kann domänenübergreifendes Ajax jedoch nicht implementiert werden. Die Voraussetzung ist, dass Sie in der Lage sein müssen um die Reaktion auf der Kolbenseite zu steuern. In diesem Artikel wird hauptsächlich die JS-Implementierung des domänenübergreifenden Antwortinhalts von Ajax vorgestellt. Ich hoffe, dass er für alle hilfreich ist.

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:

Hier ist der Flaschencode:

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

Antwortheader kann nicht gesteuert werden

In dieser Situation kann die Get-Anfrage mit jquery und post abgeschlossen werden, es kann nichts unternommen werden.

Hast du es schon gelernt? Beeilen Sie sich und probieren Sie es aus.

Verwandte Empfehlungen:

Die perfekte Lösung für domänenübergreifende Ajax-Anfragen, die COOKIE nicht bereitstellen kann

Eine detaillierte Erklärung der Prinzipien von Ajax-Cross-Domain-Anfragen mit Beispielen

Erklären Sie vier Methoden für AJAX-Cross-Domain-Anfragedaten

Das obige ist der detaillierte Inhalt vonJS implementiert domänenübergreifende Ajax-Request-Flask-Antwortinhalte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!