javascript 跨域是一個很常見的問題，其中 jsonp 是一個最常用的手段，但是 jsonp 只支持 get，不支持 post，所以如果想通過 jsonp 來 post 一些數據，就頭大了。
此處通過在一個 iframe 中生成 form 表單的形式來實現 post，并通過 postMessage 來向調用者返回值。
第一步，我們先實現一個接受 jsonp 的后端代碼，至于用什么語言實現，各位自已決定。
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' } ， 當我調用 http://localhost/test?jsoncallback=callme 的時候
你實際返回 <script>callme({ userName:'user1', password:'pass1' })</script> 即可。
第二步，本地文件夾內構建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>則說明后端程序沒有問題了。
第四步，我們寫段通用的代碼來實現上面的 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); } } //源碼 結束 //使用測試 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>
新聞熱點
疑難解答
圖片精選
