0

我有一个 HTML 文件，当您单击一个按钮时，Ajax 会加载一个 PHP 文件，然后 PHP 文件会将一些文本回显到 HTML 文件中。

问题是，如果我第二次（或第三次、或第四次等）单击该按钮，则下一个回声会覆盖上一个回声。

例如，如果我第一次单击该按钮，它将回显text here。如果我再次单击它，它会覆盖以前的回声，并且会再次显示text here而不是在新行上显示它。

这是 HTML/Ajax： 

<html>
  <body>
    <div id="show-more-results"></div>
    <center><a class="btn show-more">Show more comments</a></center>

    <script type="text/javascript">
      var videoid = <?php echo $video_id; ?>;

      $(document).ready(function() {    
        $(".show-more").click(function() {
          num_comments += 10;
          $.ajax({
            url: 'assets/misc/test.php',
            type: "POST",
            data: {video_id: videoid, num: num_comments},
            success: function(data) {
              $("#show-more-results").html(data);
            }
          });
        });
      });
    </script>
  </body>
</html>

PHP：

<?php
  $videoid = $_POST['video_id'];
  $num_comments = $_POST['num'];

  echo $videoid;
?>

如何使 PHP 文件中的下一个回声不会覆盖以前的回声？

4

6 回答 6

3

不要使用.html()每次都会覆盖元素内容的函数，而是使用.append()添加到它：

$("#show-more-results").append(data);
于 2013-09-02T20:20:40.393 回答
1

覆盖您的价值的不是 PHP echo，而是您对 jQueryshtml()函数的使用。它将元素的 HTML 数据设置为#show-more-results新值。（有效地覆盖以前的值）

要获得所需的结果，只需将先前的值与新值连接起来：

$("#show-more-results").html(
      $("#show-more-results").html() + '<br />' + data
  );

甚至更短：

$("#show-more-results").append('<br />' + data);
于 2013-09-02T20:21:53.247 回答
0

就像是

$( "#show-more-results" ).append( "<p>" + data + "</p>" );

将数据包装在<p>标签中会保持整洁，但您可能需要其他容器。

于 2013-09-02T20:20:49.043 回答
0

每个请求都是一个单独的脚本执行，就像新页面加载一样。您不会说，上一页的 HTML 会覆盖当前页面的 HTML，对吗？

如果要保留“历史记录”，则需要在 javascript 代码中累积响应，或者放入一些持久性存储（Memcache、DB 等）并返回整个数据。

于 2013-09-02T20:21:09.513 回答
0

您应该附加结果而不是替换它。

//This
$("#show-more-results").html(data);

should be
$("#show-more-results").append(data);
于 2013-09-02T20:21:16.793 回答
0

在成功函数中，使用 document.createElement 和 createTextNode 和 appendChild 不断向文档添加元素。

于 2013-09-02T20:22:54.527 回答