表单跨域提交

最新推荐文章于 2024-06-27 18:00:36 发布

༺ཌༀཉི浮华背后༃ༀད༻

最新推荐文章于 2024-06-27 18:00:36 发布

阅读量8.9k

点赞数

分类专栏： HTML JavaScript 文章标签： html form 跨域提交

JavaScript 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

HTML

23 篇文章 0 订阅

订阅专栏

利用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; 
    }

}