利用iframe实现局部刷新

使用iframe实现注册验证

最新推荐文章于 2022-10-24 14:14:52 发布

原创最新推荐文章于 2022-10-24 14:14:52 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe

PHP 同时被 2 个专栏收录

32 篇文章

订阅专栏

JS/JQ/AJAX

18 篇文章

订阅专栏

本文介绍了一种利用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;

效果如下：