我有以下php文件。一个从简单窗体捕获用户的文本，另一个回显此文本。文件如下所示。
文件1.php：
<form action="output.php" method="post">
Paste text document: <br><br>
<textarea name="doc" rows="5" cols="50" value="">
</textarea><br><br>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="Clear">
</form>
<br><br>
<div id="output_area">
</div>
</body>
</html>
输出.php：
<html lang="en">
<head><title>Output</title></head>
<body>
<?php
$doc = $_POST['doc'];
echo $doc;
?>
</body>
</html>
我希望输出显示在 DIV 标签之间，而不是在新页面上加载和显示输出。我希望在同一页面上的 DIV 标签之间输出文本。也许最好的方法是使用 AJAX 在 DIV 标签中显示输出.php并在用户单击"提交"按钮后输出文本。如何使用 AJAX 以最基本的方式执行此操作？
您可以使用 JQuery ajax 函数：
JQuery：
$("form").on("submit", function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: "output.php",
data: { doc: $('#doc').val()}
})
.done(function( data) {
$("#output_area").html(data);
});
});
更改网页：
<textarea name="doc" id="doc" rows="5" cols="50" value=""></textarea>
您可以使用
以下函数：
$(document).ready(function() {
$( "#output_area" ).load( "output.php" );
});
但请记住！jquery 的 load 函数会在您请求的页面上加载所有内容，因此不要使用：
<html lang="en">
<head><title>Output</title></head>
<body>
</body>
</html>
现在 load（函数）将放入你在输出中制作的 PHP.php
如果您想在提交时输出答案，我会这样做：
首先添加：
<a href="#" name="submit" class="pressme">Show doc</a>
然后添加 jquery：
$(document).ready(function() {
$('.pressme').on('click', function(){
var yourdata = $(this).parent().find("textarea[name='doc']").val();
$.ajax({
type: "POST",
url: "output.php",
data: {doc: yourdata},
success: function(data) {
$('#output_area').html(data);
});
});
});
我添加了一个<a>，而不是使用<input type="submit">，因为提交，将发布表单，这不是您需要的，在我了解之后，您需要在div中预览文本区域。
希望对您有所帮助！
如果您希望
$_POST变量显示在同一页面上，则
1.更改表单的操作。在您的情况下 action="file1.php"或将其留空以在提交时重新加载页面（在HTML5中无效）
2.将回声部分直接插入您的div
<div id="output_area">
<?php
echo $_POST['doc'];
?>
</div>
不在另一个文件中
你不需要为此使用 ajax。你可以通过使用javascript来做到这一点。它将提高您的代码性能。试试这个：
<script>
function show() {
document.getElementById("output_area").innerHTML=document.getElementById("doc").value;
return false;
}
</script>
<form action="#" method="post">
<textarea name="doc" id="doc" rows="5" cols="50" value="">
</textarea>
<input type="submit" name="submit" value="submit" onclick="return show();">
<input type="reset" name="reset" value="Clear">
</form>
<div id="output_area"></div>
</body>
</html>