get.php
<?php
header("Content-Type:text/html;charset=utf-8");
echo "<div class='item'><h4>{$_REQUEST['username']}:</h4>
<p>{$_REQUEST['content']}</p></div>";
t324.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.item h4{
margin: 5px;
background-color: #F1F1F1;
}
.item p{
margin: 0;
text-indent: 2em;
}
</style>
<script src="../../js/jquery-3.5.1.js"></script>
<script>
$(function () {
$("#send").click(function () {
$.post("get.php",{
username : $("#name").val(),
content : $("#content").val()
},function (data, textStatus) {
$("#comment").html(data);
});
});
});
/*
$.post()方法有4个参数，url，data，fn，type
参数type返回的内容格式包括，text，html，xml，json，script或default。
*/
</script>
</head>
<body>
<form>
<fieldset>
<legend>小伙伴们，快到碗里来！</legend>
<p>
<label for="name">昵称：</label>
<input type="text" id="name">
</p>
<p>
<label for="content">内容：</label>
<textarea name="content" id="content" rows="4" cols="30"></textarea>
</p>
<p>
<input type="button" id="send" value="提交">
</p>
</fieldset>
</form>
<h3>已有评论：</h3>
<div id="comment"></div>
</body>
</html>