1. 程式人生 > >利用iframe實現區域性重新整理

利用iframe實現區域性重新整理

利用iframe來實現註冊

1.reg.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<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" width="0" height="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>
2.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;
效果如下: