不用ajax的局部页面跳转实现方法（iframe）

Iframe实现局部刷新的原理

可以在页面中使用iframe来嵌套其他页面

在iframe中，可以使用js来操作父页面

实现后的效果图：

当焦点从用户名后的文本框中移开时出现的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="reg.PHP" method="post">
        <ul>
            <li><label for="">用户名：</label><input type="text" name="username" id="username"> <span id="message"></span></li>
            <li><label for="">密  码：</label><input type="password" name="password" ></li>
            <li><label for=""></label><input type="submit" value="注册" ></li>
            <iframe src="" frameborder="0" id="ifr"></iframe>
        </ul>
    </form>
    <script type="text/javascript">
        var username = document.getElementById("username");
        var ifr = document.getElementById("ifr");
        //绑定失去焦点事件
        username.onblur = function(){
            //向iframe发出请求，实际上就是设置其src属性
            ifr.src = "doreg.PHP?username=" + username.value;
        }
    </script>
</body>
</html>

子页面doreg.PHP的代码：

<?PHP
//获取用户名
$username = $_GET['username'];
//对该用户名检测
$message = "";
if($username == "admin"){
    $message = "对不起，该用户名已被占用！";
} else {
    $message = "恭喜，该用户名可用！";
}


//在子页面编写js代码操作父页面，通过PHP输出一段js代码
echo <<<STR
<script type="text/javascript">
    window.parent.document.getElementById("message").innerHTML = "$message";
</script>
STR;

原文链接：https://www.f2er.com/ajax/160960.html

不用ajax的局部页面跳转实现方法（iframe）

猜你在找的Ajax相关文章