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

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

亚连original: 2018-05-22 09:37:591569parcourir

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

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthodes de traitement des requêtes inter-domaines front-end et back-end Ajax (tutoriel graphique)Article suivant：Méthodes de traitement des requêtes inter-domaines front-end et back-end Ajax (tutoriel graphique)

Articles Liés

Voir plus