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

时间:2015-08-28 05:25:55

标签: php jquery mysql ajax jquery-masonry

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

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

数据被追加,但它始终是相同的数据 我还有与load more按钮相关联的data-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() ";

3 个答案:

答案 0 :(得分:2)

可能有很多方法可以做到这一点。其中一个是: 您可以在主页面传递中定义计数器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。

答案 1 :(得分:1)

当然,你总是会用那个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个结果......依此类推......

像我说的那样,那只是一种方法:)

答案 2 :(得分:1)

正如我从你上面写的那样理解我有一个非常简单的方法来做这个

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); 
     }
});

这将仅在请求成功时为按钮的data-id分配新值,然后在php文件中获取变量并使用限制或在需要之间