【前端学习笔记】利用iframe实现表单的无刷新提交案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<iframe name="formsubmit" id="myFrame" style="display: none"></iframe>

<!-- 将form表单提交的窗口指向隐藏的ifrmae,并通过ifrmae提交数据。 -->

<form action="./login" method="POST" name="forphp" target="formsubmit">

    <p>

        <label for="uname">用户名：</label>

        <input type="text" name="uname" id="uname"/>

    </p>

    <p>

        <label for="pwd">密 码：</label>

        <input type="password" name="pwd" id="pwd"/>

    </p>

    <p>

        <input type="submit" value="登录" id="sub"/>

    </p>

</form>

</body>

</html>

<script>

    var form = document.getElementsByTagName('form')[0];

    var frame = document.getElementById('myFrame');

    function callback(a,b){

        var uname = document.getElementById('uname').value;

        var pwd = document.getElementById('pwd').value;

        if(uname == a && pwd == b ){

            alert('登录成功');

            form.reset();

        }

        else{

            alert('账号密码错误');

        }

    }

    frame.addEventListener('load',function(event){

            try{

                var result = JSON.parse(frame.contentWindow.document.body.textContent);

                // 识别登录结果

                if (result.code === 200){

                    callback(result.result.uname,result.result.psw);

                }

            }catch(er){

                //ignore

            }

        }

    );

</script>

　./login文件内容

{

    "code": 200,

    "result":{

        "uname":"admin",

        "psw":"test"

    }

}

巴特西

【前端学习笔记】利用iframe实现表单的无刷新提交案例

最新文章

热门文章