异步方式就是在点击发送数据的时候并没有刷新整个页面,而是借助于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;
?>