iframe实现无刷新页面的一个简单例子_需要在一进页面就执行iframe嵌套的页面,不需要刷新才能加载出来,如何实现,使用ifr-优快云博客

本文链接：https://blog.youkuaiyun.com/wei_ke_zhi/article/details/81507038

本文介绍如何搭建本地服务器并使用PHP实现一个简单的登录功能。通过创建HTML表单收集用户名和密码，数据被发送至PHP文件进行处理，若验证成功则在页面上显示注册成功的提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要搭建一个服务器，具体搭建方法：https://mp.youkuaiyun.com/postedit/80806339

然后在www文件下编写文件。

用http://localhost去访问你创建的文件的路径。

实现的功能是：当你输入用户名和密码，提交之后，数据返回到frame中，并且在表格前有一个注册成的提示！

新建一个html文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的主页</title>
</head>
<body>
	<!-- 实现一个简单的去刷新登录页面 -->
	<div>
		<h1>我的主页</h1>
	</div>
	<div><a href="./abc.php?param=1">苹果</a></div>
	<div><a href="./abc.php?param=2">香蕉</a></div>
	
	<!-- 注册成功后在最开始显示一个注册成功字样 -->
	<div id="showInfo"></div>
	<form action="./data.php" method="post" target="myFrame">
		<!-- target表示请求的响应的目标位置在哪里 -->
		<!-- action表示将数据传送到哪 -->
		<!-- method表示数据请求的方式 -->
		用户名：<input type="text" name="username">
		密码：<input type="password" name="password">
		<input type="submit" value="提交">
	</form>
	<iframe name="myFrame" ></iframe>
	<!-- <iframe src="./myFrame.html" frameborder="0"></iframe> -->
</body>
</html>

创建一个简单的php文件

<?php	
$username = $_POST['username'];
// 获取在表单中所填写的内容
$password = $_POST['password'];
// 连接数据库
// 把两个数据添加到数据库中
// 添加成功后会返回一个数据

// 假设返回的数据是$flag，且1为成功
$flag = 1;
if ($flag == 1) {
	echo '用户名'.$username.'|密码'.$password;
}else {
	echo 0;
}
?>
<script type="text/javascript">
	// 注意是用parent来作用
	parent.document.getElementById("showInfo").innerHTML = "注册成功!";
</script>

效果图如下（有点丑，不过无所谓，只需要知道点简单的原理）：