下一页/上一页的AJAX请求帮助

时间:2011-03-11 21:08:00

标签: ajax jquery request jquery-mobile

如何使用AJAX获取下一页/上一页。

如何在浏览器中调用:

page.php?page=1-1

page.php?page=1

回报只是文字。

应该以这种格式加载页面:

1-1 要么 1

当用户单击下一个/上一个页面按钮时,如何将该页码传递给ajax调用并显示结果。

另外,如何跟踪用户当前正在查看的页面? 如何为页面设置最大分钟数,例如我有100页不打电话第101页

http://jsfiddle.net/2b8gR/5/

HTML

<input id="loadPages" name="loadPages" type="button" value="Next" />
<input id="loadPages" name="loadPages" type="button" value="Previous" /> 
<div id="displayResults" name="displayResults">
</div>

JS(这不起作用)

$("#loadPages").click(function(){
    $.ajax({
        url: 'page.php',
        data:{'page': '1-1'},
        error : function (){ alert('Error'); }, 
        success: function (returnData) {
            alert(returnData);
            $('#displayResults').append(returnData);
        }
    });
});

1 个答案:

答案 0 :(得分:3)

尝试这样的事情......保留一个名为currentPage的全局变量,并相应地调整页码。

直播演示 http://jsfiddle.net/Jaybles/MawSB/

<强> HTML

<input id="next" type="button" value="Next" />
<input id="prev" type="button" value="Previous" /> 
<div id="displayResults" name="displayResults">Current Page: 1</div>

<强> JS

var currentPage=1;
loadCurrentPage();

$("#next, #prev").click(function(){
    currentPage = 
        ($(this).attr('id')=='next') ? currentPage + 1 : currentPage - 1;

    if (currentPage==0) //Check for min
        currentPage=1;
    else if (currentPage==101) //Check for max
        currentPage=100;
    else
        loadCurrentPage();
});

function loadCurrentPage(){
    $('input').attr('disabled','disabled'); //disable buttons

    //show loading image
    $('#displayResults').html('<img src="http://blog-well.com/wp-content/uploads/2007/06/indicator-big-2.gif" />'); 

    $.ajax({
        url: '/echo/html/',
        data: 'html=Current Page: ' + currentPage+'&delay=1',
        type: 'POST',
        success: function (data) {
            $('input').attr('disabled',''); //re-enable buttons
            $('#displayResults').html(data); //Update Div
        }
    });
}

然后您的php页面可以访问$_REQUEST['page'];并相应地返回数据。