Question

我有以下php文件。一个从简单的表单中捕获用户的文本，另一个回复此文本。文件如下所示..

file1.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>

output.php：

<html lang="en">
<head><title>Output</title></head>
<body>

<?php

$doc = $_POST['doc'];

echo $doc;

?>

</body>
</html>

我希望输出显示在DIV标记之间，而不是加载并在新页面上显示输出。我希望在同一页面上的DIV标签之间输出文本。也许最好的方法是使用AJAX在DIV标签中显示output.php，并在用户点击“提交”按钮后输出文本。如何以最基本的方式使用AJAX？

Answer 1

您可以使用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);
   });
});

更改html：

<textarea name="doc" id="doc" rows="5" cols="50" value=""></textarea>

Answer 2

如果您希望$_POST变量显示在同一页面上，那么

1.改变形式对它的行动。在你的情况下 action="file1.php"或将其留空以在提交时重新加载页面（在HTML5中无效）

2.直接在你的div中插入echo部分

<div id="output_area">
<?php
  echo $_POST['doc'];
?>
</div>

不在另一个档案中

Answer 3

您可以使用以下功能：

$(document).ready(function() {
  $( "#output_area" ).load( "output.php" );
});

但记得！来自jquery的load函数加载了你要求的页面上的所有内容，所以不要使用：

<html lang="en">
   <head><title>Output</title></head>
   <body>

</body>
</html>

现在load（function）将放入你在output.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中预览textarea 。

希望它有所帮助！

Answer 4

你不需要使用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>

如何使用AJAX在DIV标签内打开URL？

4 个答案: