【js】iframe页面实现异步通信

异步方式就是在点击发送数据的时候并没有刷新整个页面,而是借助于iframe标签实现了页面的异步刷新。当然,我们也可以点击发送的时候向服务器发送数据,并借助iframe实现异步刷新。
【js页面】将输入框里的值赋给iframe的src属性,实现异步。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>【js】iframe异步通信</title>
	</head>
	<body>
		<h1>发布聊天内容</h1>
		<iframe id="fr1" style="height: 100px;"></iframe><br />
		姓名:<input type="text" id="username" name="username" /><br />
		内容:<textarea id="content" name="content" style="height: 50px;width: 300px;"></textarea><br />
		<input type="button" value="发送" onclick="sendMessage()" />
		<script type="text/javascript">
			function sendMessage(){
				//获取两个输入框的值
				var name=document.getElementById("username").value;
				var con=document.getElementById("content").value;
				//拼接URL地址
				var urlStrl="01.php?username="+name+"&content="+con;
				//把urlStrl值赋给iframe的src属性
				document.getElementById("fr1").src=urlStrl;
			}
		</script>
	</body>
</html>

【php页面】主要功能是将输入的内容输出出来

<?php
	$name=$_GET['username'];
	$con=$_GET['content'];
	echo "姓名=".$name."<br>"."内容:<br>".$con;
?>
发布了19 篇原创文章 · 获赞 20 · 访问量 490

猜你喜欢

转载自blog.csdn.net/Handsome_gir/article/details/105451870