溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript 跨域之POST實現(xiàn)方法

發(fā)布時間：2020-09-02 17:45:21 來源：腳本之家 閱讀：268 作者：空老吹 欄目：web開發(fā)

javascript 跨域是一個很常見的問題，其中 jsonp 是一個最常用的手段，但是 jsonp 只支持 get，不支持 post，所以如果想通過 jsonp 來 post 一些數(shù)據(jù)，就頭大了。

此處通過在一個 iframe 中生成 form 表單的形式來實現(xiàn) post，并通過 postMessage 來向調(diào)用者返回值。

第一步，我們先實現(xiàn)一個接受 jsonp 的后端代碼，至于用什么語言實現(xiàn)，各位自已決定。

c#代碼是：

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

比如說你想返回給我的是    { userName:'user1', password:'pass1' }  ， 當(dāng)我調(diào)用 http://localhost/test?jsoncallback=callme 的時候

你實際返回 <script>callme({ userName:'user1', password:'pass1' })</script> 即可。

第二步，本地文件夾內(nèi)構(gòu)建post測試頁面，如 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>

第三步，瀏覽一下并點擊提交，看看返回的如果是 <script>callme({ userName:'user1', password:'pass1' })</script>則說明后端程序沒有問題了。

第四步，我們寫段通用的代碼來實現(xiàn)上面的 html.

<!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="'+k+'" value="'+data[k]+'" />'
    }
      template = template 
      + '　　<input type="text" name="jsoncallback" value="function callback(data) { parent.postMessage(data, \'*\'); } callback" />'
      + '</form>'
      + '<'+'script>'
      + 'document.getElementById("form1").submit();'
      + '</'+'script>';      
   template = template.replace("{{url}}", url);      
   var div = document.createElement("div");
   div.style.display = 'none';  
   div.innerHTML = '<iframe src=""></iframe>';
   document.body.appendChild(div);   
   var ifrm = div.children[0];
   var cwin = ifrm.contentWindow;
   cwin.document.write(template);   
   window.onmessage = function(e) {
   if (callback) callback(e.data);
   }
   }
   //源碼 結(jié)束  
  //使用測試
   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>

第五步、安全問題、

window.onmessage = function(e) {
  //可通過 e 來判斷來源，并做一些安全方面的處理，此處讀者自己去研究吧，可以加個 console.log(e) 看看 e 有哪些內(nèi)容。
  if (callback) callback(e.data);
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手