Native JS implémente le contenu de réponse du flacon de requête inter-domaines Ajax (tutoriel graphique)-js tutoriel-php.cn

Native JS implémente le contenu de réponse du flacon de requête inter-domaines Ajax (tutoriel graphique)

亚连

Libérer： 2018-05-22 09:37:59

original

1572 Les gens l'ont consulté

Cet article présente principalement en détail l'implémentation JS du contenu de réponse du flacon de requête inter-domaines Ajax. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

La méthode Ajax est bonne et le site Web semble similaire. C'est du haut de gamme, mais en raison des limitations de Js, Ajax inter-domaines ne peut pas être implémenté. Ici, parlons de la solution. Le principe est que vous devez pouvoir contrôler la réponse du côté du flacon.

Technologie principale :

Modifier l'en-tête correspondant du serveur afin qu'il puisse correspondre à n'importe quel nom de domaine. et définit l'en-tête de réponse afin qu'il puisse correspondre à la méthode POST.

Code d'implémentation :

Voici le code du flacon :

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

Copier après la connexion

Code de test 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>

Copier après la connexion

Impossible de contrôler l'en-tête de réponse

Dans cette situation, la demande get peut être complétée à l'aide de jquery, mais vous ne pouvez rien faire concernant la publication. Actuellement, j'écris à la fois le front et le back end, je n'envisagerai donc pas cette situation pour le moment.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

jQuery+ajaxExplication détaillée de la façon de lire json et de trier

jQuery+Ajax pour vérifier le nom des utilisateurs

Un exemple d'explication de XML en AJAX

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Native JS implémente le contenu de réponse du flacon de requête inter-domaines Ajax (tutoriel graphique)