recherche

Maison >interface Web >js tutoriel >Explication détaillée des étapes de mise en œuvre du POST dans tous les domaines à l'aide de JS

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

php中世界最好的语言
php中世界最好的语言original
2018-05-31 10:26:151370parcourir

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();
    }
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>
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>
La cinquième étape, les problèmes de sécurité, 

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

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：Boucles Node.JS pour supprimer tous les fichiers dans les dossiers et sous-répertoires non videsArticle suivant：Boucles Node.JS pour supprimer tous les fichiers dans les dossiers et sous-répertoires non vides

Articles Liés

Voir plus