利用iframe实现表单的无刷新提交

最新推荐文章于 2021-03-11 21:50:35 发布

yihuoZhou

最新推荐文章于 2021-03-11 21:50:35 发布

阅读量2.1k

点赞数 1

分类专栏： dom编程文章标签：表单无刷新提交

本文链接：https://blog.csdn.net/qq_21794603/article/details/72821886

版权

dom编程专栏收录该内容

10 篇文章 0 订阅

订阅专栏

表单的无刷新提交，除了使用ajax实现，利用iframe也可实现表单的无刷新提交（其关键在于设置iframe的name与表单的target值相同）。
下面代码利用iframe实现表单的无刷新提交兼容到主流浏览器（IE6+，Firefox最新，Chrome最新）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>利用iframe实现表单的无刷新提交</title>
    <style type="text/css">
        .f-hidden{
            display: none;
        }
    </style>
</head>
<body>
<iframe src="" id="targetFrame" name="targetFrame" class="f-hidden"></iframe>
<form id="showForm" action="/crops/delete" method="post" enctype="application/x-www-form-urlencoded" target="targetFrame">
    <label><input type="text" name="username"/></label>
    <button type="submit">提交</button>
</form>
<!--    <script type="text/javascript">
        var showForm=document.getElementById('showForm');
        showForm.addEventListener('submit',function(event){
            if(!showForm.username.value){
                event.preventDefault();
                return;
            }
        });
    </script> -->
<script type="text/javascript">
    var targetFrame=document.getElementById('targetFrame');
    //兼容IE事件
    function addEvent(node,event,handler){
        if(!!node.addEventListener){
            node.addEventListener(event,handler,!1);
        }else{
            node.attachEvent('on'+event,handler);
        }
    }
    //给iframe注册load事件
    addEvent(targetFrame,'load',function(event){
        try{
            var result = JSON.parse(targetFrame.contentWindow.document.body.textContent);
            if(result.code === 200){
                //正确返回提交的结果
                console.log(result);
            }
        }catch(e){
            //捕获错误
        }
    })

</script>
</body>
</html>