表单跨域提交
利用form表單跨域post
? ? ? 現在ajax應用這么廣泛，一般的應用都是直接通過異步調用就可以了，但是有些東西必須要使用post，而且是跨域的時候，ajax異步調用的方式就無能為力了。當然現在也有很多種辦法，比如通過flash中轉去post，可以post到任何域中，或者是通過嵌入iframe來實現，flash的方式雖然好，但是用戶還得下載個swf文件，而且as開發我也就略知皮毛，所以這里我就是要使用嵌入iframe的方式來實現。
? ? ? 我的需求是將部分內容post到server中，因為服務器是c++寫的cgi，所以沒辦法通過代理頁的方式來實現，只好在本頁面來實現。
?
在這里，我通過將需要post的內容寫入content的input中，然后點擊提交，將form的action設置為目標服務器的url，target設置為iframe的名稱，這樣就可以實現無刷新的跨域post了，但是由于瀏覽器防止重復提交的功能，所以如果直接提交到iframe的話，后面你刷新頁面的話，瀏覽器就會提示是否要重復提交，所以這里我們監聽iframe的onload事件，當iframe成功load之后，就將iframe的src指向空白頁，從而瀏覽器認為已經跳轉到新頁面了，刷新也就不會提示重復提交的彈出框了。
這里我們還可以在iframe?load成功的時候，通過contenWindow屬性來獲取服務器的響應，從而可以判斷post是否成功。因為這里要先判斷post是否成功，所以在取得了服務器返回的數據之后再設置iframe的src為空白頁面，并且將iframe的onload事件取消，否則iframe每次src設置為about：blank都會觸發onload事件。
?
這里看到有人說ie6中會有iframe的onload事件調用時頁面仍未載入完成，或是不觸發onload事件，則需要通過監聽iframe的readyState來實現得到服務器響應完成的功能。我貌似還沒碰到，等碰到了的話再來解決。最近做的東西還要改as代碼，恩，可以學學as了
?
<html> <head> <title>ddd</title> </head> <body> <script type="text/javascript"> function check() {var btn = document.getElementById("test_submit");var frm = document.forms["test_form"];var ifm = document.getElementById("test_iframe");frm.action = "http://xxx.xxx.xxx/post.php";frm.target = "test_iframe";frm.submit();btn.disabled = "disabled";ifm.onload = function(){btn.disabled = "";var str = ifm.contentWindow;alert(str.document.body.innerHTML);ifm.src = "about:blank"; ifm.onload = null; } return false; }</script> <form id="test_form" name="test_form" ><input type="hidden" name="content" value="xxx" /><input type="submit" name="test_submit" id="test_submit" /> </form> <iframe id="test_iframe" name="test_iframe" width="1" height="1" style="display:none"></iframe> </body> </html>?
好吧，果然在ie下iframe不會觸發onload事件，于是改為了?Nicholas C.Zakas提供的方法，通過attachEvent來添加onload事件。
ifm.onload = function(){ btn.disabled = ""; var str = ifm.contentWindow; alert(str.document.body.innerHTML); ifm.src = "about:blank"; ifm.onload = null; }//改為if(ifm.attachEvent){ifm.attachEvent("onload", function(){ btn.disabled = ""; var str = ifm.contentWindow; alert(str.document.body.innerHTML); ifm.src = "about:blank"; ifm.detachEvent("onload", arguments.callee); }}else{ifm.onload = function(){ btn.disabled = ""; var str = ifm.contentWindow; alert(str.document.body.innerHTML); ifm.src = "about:blank"; ifm.onload = null; }}總結
- 上一篇： mysql8.0主从配置,MySQL 8
- 下一篇： 微软u盘安装工具_使用微软Winget工