Explication détaillée des étapes de mise en œuvre du POST dans tous les domaines à l'aide de JS-js tutoriel-php.cn

Explication détaillée des étapes de mise en œuvre du POST dans tous les domaines à l'aide de JS

php中世界最好的语言

Libérer： 2018-05-31 10:26:15

original

1308 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée des étapes de la méthode POST inter-domaines JS Ce qui suit est un cas pratique, prenons un cas pratique. regarder.

javascript Le cross-domain est un problème très courant, parmi lequel jsonp est la méthode la plus couramment utilisée, mais jsonp ne prend en charge que get, pas post, donc si vous souhaitez publier des données via jsonp , la tête est grosse.

Post est implémenté ici en générant un formulaire dans une iframe et renvoie la valeur à l'appelant via postMessage.

Dans la première étape, nous implémentons d'abord un code back-end qui accepte jsonp Quant au langage à utiliser pour l'implémentation, vous décidez vous-même.

Le code c# est :

protected void Page_Load(object sender, EventArgs e)
    {
      StringBuilder sbRet = new StringBuilder();
      sbRet.Append("<script>");
      sbRet.Append(Request["jsoncallback"]);
      sbRet.Append("({");
      foreach (string k in Request.Form) {
        if (k == "jsoncallback") continue;
        sbRet.Append("'"+k+"':'"+Request.Form[k]+"'");
      }
      
      sbRet.Append("});");
      sbRet.Append("</script>");
      Response.Write(sbRet.ToString());
      Response.End();
    }

Copier après la connexion

Par exemple, ce que vous souhaitez me renvoyer est { userName:'user1', password:'pass1' } , lorsque j'appelle http : //localhost /test?jsoncallback=callme

Vous retournez en fait <script>callme({ userName:'user1', password:'pass1' })</script>.

La deuxième étape consiste à créer une page de post-test dans le dossier local, tel que d:test.html

<form action="http://localhost/test" method="post">
　　<input type="text" name="userName" value="user1" />
　　<input type="text" name="password" value="pass1" />
  <input type="text" name="jsoncallback" value="callme" />
  <input type="submit" value="提交" />
</form>

Copier après la connexion

La troisième étape consiste à parcourir et à cliquer sur Soumettre pour voir si elle est renvoyé <script>callme({ userName:'user1', password:'pass1' })</script> signifie qu'il n'y a aucun problème avec le programme back-end.

La quatrième étape, nous écrivons un code général pour implémenter le code HTML ci-dessus.

<!doctype html>
<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>测试一哈</title>
  </head>  
  <body>   
  <script>
  //源码 开始
   function postJSONP(url, data, callback) {
    var template = '<form action="{{url}}" method="post" id="form1">';   
    for (var k in data) {
     template = template
       + ' 　<input type="text" name="&#39;+k+&#39;" value="&#39;+data[k]+&#39;" />'
    }
      template = template 
      + '　　<input type="text" name="jsoncallback" value="function callback(data) { parent.postMessage(data, \&#39;*\&#39;); } callback" />'
      + '</form>'
      + '<&#39;+&#39;script>'
      + 'document.getElementById("form1").submit();'
      + '</&#39;+&#39;script>';      
   template = template.replace("{{url}}", url);      
   var p = document.createElement("p");
   p.style.display = 'none';  
   p.innerHTML = '<iframe src=""></iframe>';
   document.body.appendChild(p);   
   var ifrm = p.children[0];
   var cwin = ifrm.contentWindow;
   cwin.document.write(template);   
   window.onmessage = function(e) {
   if (callback) callback(e.data);
   }
   }
   //源码 结束  
  //使用测试
   window.onload = function() {
   postJSONP('http://localhost:59898/WebForm1.aspx', { userName: '张静', password: '就不告诉你' }, function(data) {
    console.log(11, data);
   });
   postJSONP('http://localhost:59898/WebForm1.aspx', { 仓库: '1号大仓', 面积: '2万平米' }, function(data) {
    console.log(22, data);
   });
  }
 </script>
  </body>
</html>

Copier après la connexion

La cinquième étape, les problèmes de sécurité,

window.onmessage = function(e) {
  //可通过 e 来判断来源，并做一些安全方面的处理，此处读者自己去研究吧，可以加个 console.log(e) 看看 e 有哪些内容。
  if (callback) callback(e.data);
}

Copier après la connexion

Je crois que vous avez lisez-le Vous maîtrisez la méthode dans le cas de cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser Vue pour implémenter des données arborescentes

Quelles sont les méthodes à mettre en œuvre par JS Traversée de l'arborescence DOM

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

Explication détaillée des étapes de mise en œuvre du POST dans tous les domaines à l'aide de JS