Question

我有一个显示一些帖子的页面：当我点击“其他文章”时，我计算主div中的文章数量，并通过php脚本的ajax调用传递此变量。

//JS (ajax)
$(document).ready(function() {
    $(".otherArticle").click(function() {
        var numPosts = $("#posts > div").length; // get number of post in the page
        $.ajax({
            type: "GET",
            url: "script.php",
            data: {
                'number': numPosts
            },
            dataType: "html",
            success: function(data) {

                $("#posts").html(data) // write in #posts the new data                                                                                                  
            },
            error: function() {
                alert("Noob");
            }
        });
    });
});

我的HTML

<div id="posts">
    <div class="article">...</div>
    <div class="article">...</div>
    <div class="article">...</div>
    <button class="otherArticle"></button>
</div>

一开始有3篇文章。当我点击“otherArticle”时，我通过我的PHP脚本中的文章数量，我在我的文章数量中添加5。之后，我查询选择限制为5 + 3的其他文章

/*script.php*/
<?php
    //include connect db
    $numberNewPosts= $_GET['number'] + 5 ;
    $query= "select posts from myTab limit 0, ". $numberNewPosts ." ";
    $result = mysqli_query($db, $query);
    while($row = mysqli_fetch_array($result)){
      echo "<div= 'article'> ". $row['posts '] ." </div> ";
    }
    echo "<button class='otherArticle'></button>";
?>

如果单击一次，则其工作，并显示8篇文章（5 + 3）。但是我第二次点击，它不起作用。我想它有8篇文章，它在我的脚本php中添加了其他5篇文章。有任何想法吗？

Answer 1

注意到@ADyson已经回答了这个问题。解决方案：

这是因为你的按钮位于＆＃34;帖子＆＃34; DIV。像这样更改你的代码：

<强> HTML

<div id="posts">
    <div class="article">...</div>
    <div class="article">...</div>
    <div class="article">...</div>
</div>
<button class="otherArticle"></button>

<强> PHP

//include connect db
$numberNewPosts= $_GET['number'] + 5 ;
$query= "select posts from myTab limit 0, ". $numberNewPosts ." ";
$result = mysqli_query($db, $query);
while($row = mysqli_fetch_array($result)){
  echo "<div class='article'> ". $row['posts '] ." </div> ";
}

更多调用同一页面中的ajax来显示更多数据

1 个答案: