Question

我有一个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文件中的下一个回声不会覆盖以前的回声？

Answer 1

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

$("#show-more-results").append(data);

Answer 2

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

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

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

甚至更短：

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

Answer 3

像

这样的东西

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

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

Answer 4

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

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

Answer 5

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

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

should be
$("#show-more-results").append(data);

Answer 6

在success函数中，使用document.createElement和createTextNode以及appendChild来继续向文档添加元素。

PHP echo覆盖以前的echo

6 个答案: