使用$ GET进行分页 - 在AJAX中 - 是可能的

时间:2013-04-25 12:57:11

标签: php jquery ajax

我正在使用$ _GET开发一个用于分页的PHP类。它是标准的,从网上找到。

这里效果很好: page.php:

<form method ="GET">
<?php 
$pages = new Pagination();
echo "<br/>";
?>   
</form>

我想在index.php中将此page.php与ajax / jquery一起使用并保留在index.php中

<!DOCTYPE html>  
<body>
<div id ="result"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>   
<script>
$(document).ready(function() {
    $.post('./page.php', 
            function (data) {
                $('#result').html(data); 
            } 
    );  
});

</script>
</body>  
</html>

这可能吗?

2 个答案:

答案 0 :(得分:1)

是否有可能不使用jquery的$ .post,你可以用$ .get替换$ .post?

答案 1 :(得分:1)

所以代替$.post而不是你所说的寻找$_GET['page']

所以你可以这样做:

<script>
$(document).ready(function(e) {

    var page_num = 1;
    $('.nextpage').on('click',function(e){
        e.preventDefault(); // stop the link from going anywhere
        $.get('./page.php',
            {
                page: page_num // this is the same as $_GET['page']
            },
            function (data) {
                $('#result').html(data);
                page_num++;
            } 
        );  
    });

    $('.nextpage').click(); // emulate the click to get the first page 
});
</script>

在你的身体里是这样的:

<a href="/page.php?page=2" class="nextpage">Next page</a>

值得注意的是,在page.php你不需要有那种形式,因为我看不到它会做多少

<强>更新

为了让index.php来自page.php操纵分页,你可以page.php返回一个名为.hidden_pagination的隐藏div及其全部内容。

<script>
$(document).ready(function(e) {

    $('.pagination').on('click','a',function(e){
        e.preventDefault(); // stop the link from going anywhere

        var next_page = $(this).attr('data-id'); // get the next page from the link data-id attribute
        $.get('./page.php',
            {
                page: next_page // this is the same as $_GET['page']
            },
            function (data) {
                $('#result').html(data);

                $('.pagination').html($('#result').children('.hidden_pagination').html()); // add the new pagination to the current pagination
            } 
        );  
    });

    $('.nextpage').click(); // emulate the click to get the first page 
});
</script>

<div class="pagination">
    <a href="#" class="nextpage" data-id="2">Next page</a>
</div>


<div id="result">
 this will be replaced with the ajax response
</div>