如何使用 AJAX 打开 DIV 标签内的 URL？答案

【问题标题】：How can I open a URL inside a DIV tag using AJAX?如何使用 AJAX 打开 DIV 标签内的 URL？
【发布时间】：2015-01-15 04:32:08
【问题描述】：

我有以下 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>

输出.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 来做到这一点？

【问题讨论】：

可能重复：stackoverflow.com/questions/1218245/… 查看该页面了解详情。

标签： javascript php ajax

【解决方案1】：

您不需要为此使用 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>

【讨论】：

似乎是个好主意。是否可以将您的代码嵌入到我上面的代码中，并进行所有必要的更改以使其工作，以便我可以简单地复制整个代码？（我是 javascript 新手：/）
粘贴文本文档：<input type="submit" name="submit" value="submit" onclick="return show();"><input type="reset" name="reset" value="Clear">表单> <div id="output_area"> </div>
如上所述，将 id="doc" 赋予 textarea ，添加 onclick="return show();"提交按钮，将 action="#" 设置为表单，以便重置按钮也可以工作，最后在

【解决方案2】：

您可以使用该功能：

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

但是记住！来自 jquery 的加载函数会加载您要求的页面上的所有内容，所以不要使用：

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

</body>
</html>

现在加载（函数），将放入您在 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。

希望对你有帮助！

【讨论】：

这段代码看起来很棒！我使用了第二部分，因为我想在提交时输出文本。所以我使用了“a href”标签而不是提交按钮，就像你推荐的那样。我复制了您拥有的最后一个代码，然后将其放在“脚本”标签之间。然后我在“head”标签之间添加了代码。我收到一个语法错误：“缺少 ; before 语句”。我不知道如何解决这个问题。
嘿，莫达维什。您在您的网站上运行什么 jquery 版本？
嘿，modarwish。我的错，问题是有“））；”在 val()) 之后；只需删除一个“）”，它就会起作用。对不起这个错误。 :-(

【解决方案3】：

可以使用 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>

【讨论】：

【解决方案4】：

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

1.将表单的操作更改为它。在你的情况下 action="file1.php" 或留空以在提交时重新加载页面（在 HTML5 中无效）

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

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

不在另一个文件中

【讨论】：