Detaillierte Erläuterung der domänenübergreifenden JS-POST-Implementierungsschritte-js-Tutorial-php.cn

Detaillierte Erläuterung der domänenübergreifenden JS-POST-Implementierungsschritte

php中世界最好的语言

Freigeben： 2018-05-12 11:18:13

Original

2362 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Schritte zur Implementierung von JS-domänenübergreifendem POST ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die JS-domänenübergreifende POST-Implementierung? .

Javascript Cross-Domain ist ein sehr häufiges Problem, wobei JSONP die am häufigsten verwendete Methode ist, aber JSONP unterstützt nur Get, nicht Post, also wenn Sie einige Daten über posten möchten jsonp, der Kopf ist groß.

Post wird hier implementiert, indem ein Formular in einem Iframe generiert wird und der Wert über postMessage an den Anrufer zurückgegeben wird.

Im ersten Schritt implementieren wir zunächst einen Backend-Code, der JSONP akzeptiert. Welche Sprache für die Implementierung verwendet wird, entscheiden Sie selbst.

Der C#-Code lautet:

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();
    }

Nach dem Login kopieren

Was Sie mir beispielsweise zurückgeben möchten, ist { Benutzername:'Benutzer1', Passwort:'Pass1' } , wenn ich http:// aufrufe localhost/test Wenn ?jsoncallback=callme

Sie tatsächlich <script>callme({ userName:'user1', password:'pass1' })</script> zurückgeben.

Der zweite Schritt besteht darin, eine Post-Test-Seite im lokalen Ordner zu erstellen, z. B. 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>

Nach dem Login kopieren

Der dritte Schritt besteht darin, zu suchen und auf „Senden“ zu klicken, um zu sehen, ob der zurückgegebene Wert vorliegt ist <script>callme({ userName:'user1', password:'pass1' })</script> bedeutet, dass es kein Problem mit dem Back-End-Programm gibt.

Im vierten Schritt schreiben wir einen allgemeinen Code, um das obige HTML zu implementieren.

<!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>

Nach dem Login kopieren

Der fünfte Schritt, Sicherheitsprobleme,

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

Nach dem Login kopieren

Ich glaube, Sie haben den Fall gelesen Dieser Artikel Nachdem Sie die Methode gemeistert haben, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website, um weitere spannende Inhalte zu erhalten!

Empfohlene Lektüre:

React-Navigation-Nutzungszusammenfassung (mit Code)

Allgemeines Hinzufügen, Löschen, Ändern und Abfragen Operationen von JS-DOM-Elementen Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der domänenübergreifenden JS-POST-Implementierungsschritte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!