ajax 用不同的数据加载更多按钮

Question

我在加载更多按钮上使用 ajax，但问题是每当我单击加载更多按钮时，我每次都从 content.php 获取相同的数据，其中包含一个 mysql 查询从 table 中获取数据。

如何根据 id 从 table 中获取不同的数据，最初存在十行，当我单击“加载更多”按钮时，接下来的 10 行应附加已存在的数据。

数据被追加，但它始终是相同的数据。
我还有与加载更多按钮关联的数据 ID，它是与最初存在的元素的最后一个元素关联的 ID。

var collegename=$(this).attr("value");  
var contentid=$(this).attr("data-id"); 

$.ajax({
    type: "post",
    url: "content.php",
    data: 'contentid='+contentid+'&collegename='+collegename,
    dataType: "text",                  
    success: function(response) {
        var $loaderImg =  $(this).parent().find(".loadingdata").hide();
        $content.html(response).prepend($loaderImg);
     }
});

//content.php

$collegename     = isset($_POST["collegename"]) ? $_POST["collegename"] : 0;
$query= "SELECT * FROM ".$collegename." ORDER BY rand() ";

Answer 1

可能有很多种方法可以做到这一点。其中之一是：您可以在主页 pass 中定义一个计数器 ajax 调用变量，与 ajax 绑定并基于它获取结果，例如：

var countAjaxHit = 0 ; 
$.ajax({
    type: "post",
    url: "content.php",
    data: 'contentid='+contentid+'&collegename='+collegename+'&countAjaxHit='+countAjaxHit,
    dataType: "text",                  
    success: function(response) {
        var $loaderImg =  $(this).parent().find(".loadingdata").hide();
        $content.html(response).prepend($loaderImg);
    countAjaxHit = countAjaxHit + 1;
     }
});

//content.php

$collegename     = isset($_POST["collegename"]) ? $_POST["collegename"] : 0;
$countAjaxHit     = isset($_POST["countAjaxHit"]) ? $_POST["countAjaxHit"] : 0;
if($countAjaxHit==0)
{
    $countAjaxHit++;
}
else
{
    $countAjaxHit=$countAjaxHit+10;
}
$query= "SELECT * FROM ".$collegename." WHERE 1=1 LIMIT ".$countAjaxHit.", 10";

尽管您可以在获取数据时将 ajax 方法从 POST 更改为 GET。

Answer 2

当然，使用 sql 语句你总是会得到相同的数据！

您应该做的第一件事是，尝试将数据作为对象传递....

$.ajax({
    type: "post",
    url: "content.php",
    data: { 
            contentid:   contentid, 
            collegename: collegename 
          },                 
    success: function(response) {
        var $loaderImg =  $(this).parent().find(".loadingdata").hide();
        $content.html(response).prepend($loaderImg);
     }
});

你可以在 php 上轻松获取它，例如$_POST['data']['contentid']

你有不止一种选择来获得你正在寻找的内容....

一种是限制你的结果

$amount = 10;
$offset = ($_POST['data']['contentid']?$_POST['data']['contentid']*$amount:0);
$query  = "SELECT * FROM ".$collegename." LIMIT {$offset}, {$amount} ";

例如，您将 0 作为 id 传递，您将获得前 10 个结果，当您传递 1 时，您将获得接下来的 10 个结果...依此类推...

就像我说的，这只是一种方法:)

Answer 3

正如我从你上面写的内容了解到的，我有一个非常简单的方法来做到这一点

var collegename=$(this).attr("value");  
$a = $(this).attr('data-id');  //this will get the data-id
var contentid=$a; //$a assigned to variable for passing to php file

$.ajax({
    type: "post",
    url: "content.php",
    data: 'contentid='+contentid+'&collegename='+collegename,
    dataType: "text",                  
    success: function(response) {
        var $loaderImg =  $(this).parent().find(".loadingdata").hide();
        $content.html(response).prepend($loaderImg);
        $a=$a-5;  
        $('.button').attr('data-id', $a); 
     }
});

仅当请求成功时，这才会为按钮的数据 ID 分配一个新值，然后获取 php 文件中的变量，并将其与 limit 或 between 一起使用，如您所要求的

ajax 用不同的数据加载更多按钮

ajax load more button with different data

php

jquery

mysql

ajax

jquery-masonry