Maison > Article > interface Web > Comment utiliser JS pour implémenter le POST sur plusieurs domaines

Comment utiliser JS pour implémenter le POST sur plusieurs domaines

php中世界最好的语言original: 2018-05-23 13:40:331462parcourir

Cette fois, je vais vous montrer comment utiliser JS pour implémenter le POST sur plusieurs domaines. Quelles sont les précautions pour implémenter le POST sur plusieurs domaines avec JS. Voici des cas pratiques, jetons un coup d'œil.

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 trouver le plus petit commun multiple et le plus grand diviseur commun en JS

Utilisation du sélecteur de région composant dans VUE Explication détaillée

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：Comment utiliser Vue pour implémenter des données d'arborescenceArticle suivant：Comment utiliser Vue pour implémenter des données d'arborescence

Articles Liés

Voir plus