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

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


<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 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>

你可能感兴趣的:(dom编程)