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;