The asynchronous method is to not refresh the entire page when clicking to send data, but to achieve asynchronous refresh of the page with the help of iframe tags. Of course, we can also send data to the server when we click send, and use the iframe to achieve asynchronous refresh.
[Js page] Assign the value in the input box to the src attribute of the iframe to achieve asynchronous.
<!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 page] The main function is to output the input content
<?php
$name=$_GET['username'];
$con=$_GET['content'];
echo "姓名=".$name."<br>"."内容：<br>".$con;
?>
