无休止的滚动和使用GET方法来过滤内容

Endless scrolling and using the GET method to filter content

本文关键字：方法 过滤 GET 滚动 无休止      更新时间：2023-09-26

我正在开发一个无限滚动显示其内容的移动网站。无止境的滚动是用这个脚本实现的(我的实现在下面)。脚本按预期工作。

但有些内容被分为不同的类型。在没有无休止滚动的桌面版本上，使用GET方法过滤类型。但是，由于连接到数据库的实际php存储在单独的"ajax.php"中，因此GET中包含的过滤器参数没有传递给它，从而导致ajax.php什么也不返回。有办法解决这个问题吗?提前感谢

显示every的页面: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="javascript.js"></script>
<script>
$(document).ready(function() {
$('#content').scrollPagination({
nop     : 5, // The number of posts per scroll to be loaded
offset  : 0, // Initial offset, begins at 0 in this case
error   : ' ', // When the user reaches the end this is the message that is
                            // displayed. You can change this if you want.
delay   : 500, // When you scroll down the posts will load after a delayed amount of time.
               // This is mainly for usability concerns. You can alter this as you see fit
scroll  : true // The main bit, if set to false posts will not load as the user scrolls. 
               // but will still load if the user clicks.
});
});
</script>
</head>
<body>
    <div id="content">
        <!-- infinite scroll content here -->
    </div>
</body>
</html>

javascript.js: 

(function($) {
$.fn.scrollPagination = function(options) {
    var settings = { 
        nop     : 10, // The number of posts per scroll to be loaded
        offset  : 0, // Initial offset, begins at 0 in this case
        error   : ' ', // When the user reaches the end this is the message that is
                                    // displayed. You can change this if you want.
        delay   : 500, // When you scroll down the posts will load after a delayed amount of time.
                       // This is mainly for usability concerns. You can alter this as you see fit
        scroll  : true // The main bit, if set to false posts will not load as the user scrolls. 
                       // but will still load if the user clicks.
    }
    // Extend the options so they work with the plugin
    if(options) {
        $.extend(settings, options);
    }
    // For each so that we keep chainability.
    return this.each(function() {       
        // Some variables 
        $this = $(this);
        $settings = settings;
        var offset = $settings.offset;
        var busy = false; // Checks if the scroll action is happening 
                          // so we don't run it multiple times
        // Custom messages based on settings
        if($settings.scroll == true) $initmessage = '顯示更多';
        else $initmessage = '顯示更多';
        // Append custom messages and extra UI
        $this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>');
        function getData() {
            // Post data to ajax.php
            $.post('ajax.php', {
                action        : 'scrollpagination',
                number        : $settings.nop,
                offset        : offset,
            }, function(data) {
                // Change loading bar content (it may have been altered)
                $this.find('.loading-bar').html($initmessage);
                // If there is no data returned, there are no more posts to be shown. Show error
                if(data == "") { 
                    $this.find('.loading-bar').html($settings.error);   
                }
                else {
                    // Offset increases
                    offset = offset+$settings.nop; 
                    // Append the data to the content div
                    $this.find('.content').append(data);
                    // No longer busy!  
                    busy = false;
                }   
            });
        }   
        getData(); // Run function initially
        // If scrolling is enabled
        if($settings.scroll == true) {
            // .. and the user is scrolling
            $(window).scroll(function() {
                // Check the user is at the bottom of the element
                if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {
                    // Now we are working, so busy is true
                    busy = true;
                    // Tell the user we're loading posts
                    $this.find('.loading-bar').html('載入中...');
                    // Run the function to fetch the data inside a delay
                    // This is useful if you have content in a footer you
                    // want the user to see.
                    setTimeout(function() {
                        getData();
                    }, $settings.delay);
                }   
            });
        }
        // Also content can be loaded by clicking the loading bar/
        $this.find('.loading-bar').click(function() {
            if(busy == false) {
                busy = true;
                getData();
            }
        });
    });
}
})(jQuery);

ajax.php: 

<?php
mysql_connect('host', 'username', 'password') or die();
mysql_select_db('database');
#START enable chinese encoding
mysql_query("SET character_set_results=utf8");
#END enable chinese encoding
$offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();
$postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();
$category = mysql_real_escape_string($_GET['category']);

$run = mysql_query("SELECT * FROM table WHERE category='$category' ORDER BY date DESC LIMIT ".$postnumbers." OFFSET ".$offset);

    while($row = mysql_fetch_array($run)) {
        echo '
            <a href="/video/video.php?id=' . $row['id'] . '&relatedgroup=' . $row['relatedgroup'] . '">
            <div id="contentitemwrap">
                <div id="videostripe">&nbsp;</div>
                <div id="contentitemtitle">
                    <h2>' . $row['name'] . ' <span class="relatedtype">(' . $row['relatedtype'] . ')</span></h2>
                    於' . $row['date'] . '發表
                    <p class="contenttext">' . $row['fbdescription'] . '</p>
                </div>
                <div id="widescreenimagewrap">
                    <div id="widescreenimageratio">
                    </div>
                    <div id="widescreenimage">
                        <img id="img100" src="' . $row['thumbnail'] . '" />
                    </div>
                </div>
            </div>
            </a>
        ';
    }
?>

假设您正在通过查询字符串获得您想要传递到托管页面的参数，那么您应该能够将getData中的$.post调用更改为:

        $.post('ajax.php'+window.location.search, {
            action        : 'scrollpagination',
            number        : $settings.nop,
            offset        : offset,
        }, function(data) {
           ..... the rest of your code
相关文章：