Question

我正在为我的网站进行无限滚动（滚动加载数据）插件。

这是load.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   : 'No More Posts!', // 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 = 'Scroll for more or click here';
        else $initmessage = 'Click for more';

        // Append custom messages and extra UI
        $this.append('<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('#container123').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('Lade...');

                    // 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文件中，该文件看起来像这样（缩短）：

$sql = "SELECT * FROM table WHERE";

if (!empty($_GET['search'])){

$sql = $sql . " (Name LIKE '%".$_GET['search']."%' OR Description LIKE '%".$_GET['search']."%')";
} else {
$sql = $sql . " Name!=''";  
}

$offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();
$postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();

$sql = $sql . " LIMIT ".$postnumbers." OFFSET ".$offset;

$result=mysql_query($sql);
while($row=mysql_fetch_array($result)){

echo 'item';
}

另一方面，此ajax.php - 脚本会在我的index.php文件中显示数据。

以下是问题所在：

请查看上方if (!empty($_GET['search'])) - 声明。显然，此$_GET - 变量无法填写，因为相应的表单（搜索表单）位于我的index.php页面中。

现在我的问题是：如何让if (!empty($_GET['search']))工作？我对ajax真的不太满意，我认为问题是load.js中创建的数据首先会被发布到ajax.php。

只是为了完成，这是index.php

中的相应标记

 <section id="start" class="...">
 <div id="container123" class="...">
 </div>
 </section>

 <!-- search form etc. -->

非常感谢您提前。我知道这是很多代码。（顺便说一句，我知道，MySQL已经过时且危险）

Answer 1

修改您的插件以接受搜索字词作为参数，并将您的index.php编码为。

 <script>
$("#container123" ).scrollPagination ({ q:'<?php echo $_GET['search']; ?>'"}); </script>
<div id="container123"></div>

现在，由于此代码是用index.php编写的，因此您将获得$ _GET [＆＃39; search＆＃39;]

在滚动上加载新内容

1 个答案: