php - 使用 php jquery 和 ajax 进行过滤系统的无限滚动

Question

我正在创建一个工作板，它的无限滚动系统运行良好，然后我添加了一个过滤系统，似乎无法让它们一起工作。

这是无限滚动的脚本，它将让您滚动到页面底部，直到出现加载器，此时它将加载数据以附加到我页面上的结果 div：

<script>
            $(document).ready(function(){
                $('#loader').on('inview', function(event, isInView) {
                    if (isInView) {
                        var nextPage = parseInt($('#pageno').val())+1;
                        $.ajax({
                            type: 'POST',
                            url: 'ajax/pagination.php',
                            data: { pageno: nextPage },
                            success: function(data){
                                if(data != ''){                          
                                    $('#result').append(data);
                                    $('#pageno').val(nextPage);
                                } else {                                 
                                    $("#loader").hide();
                                }
                            }
                        });
                    }
                });
            });
        </script>
        

这是我的过滤器脚本，它允许您从两个下拉列表中进行选择，然后单击提交，此时它将创建一个新的 sql 语句并将结果拉入结果 div：

         <script>  
         $(document).ready(function(){  
     
     
     result();

    function result()
    {
        $('.result').html('<div id="result"></div>');
        var action = 'display';
        
        $.ajax({  
            url:"display.php",  
            method:"POST",  
            data:{action:action},  
            success:function(data){  
                 $('#result').html(data);  
            } 
        });
    }
     
      $('#submit').click(function(){  
           var action = 'display';
           var state = []; 
            $('.get_state_value option:selected').each(function(){  
                if($(this).is(":selected"))  
                {  
                     state.push($(this).val());  
                }  
           }); 
           
            var specialty = [];  
           $('.get_value option:selected').each(function(){  
                if($(this).is(":selected"))  
                {  
                     specialty.push($(this).val());  
                }  
           });  
           

           $.ajax({  
                url:"display.php",  
                method:"POST",  
                data:{action:action, state:state, specialty:specialty},  
                success:function(data){  
                     $('#result').html(data);  
                }  
           });  
      });  
 });  
         </script>  

这是我的 ajax 文件，它收集数据并将其发送回主页：

<?php  
 //insert.php  
$pageno = $_POST['pageno'];

$no_of_records_per_page = 99;
$offset = ($pageno-1) * $no_of_records_per_page;
 
 if(isset($_POST["state"]) || isset($_POST["specialty"]) || isset($_POST["action"]))  
 {  
     $state = null;
     if(!empty($_POST['state']))
     {... filtering stuff};
     
     
        $query = "SELECT * FROM jobs WHERE jobisPublic = 1".$state.$specialty." LIMIT $offset, $no_of_records_per_page";  
        $result = mysqli_query($connect, $query);  
        
        while($job_info[] = mysqli_fetch_array($result))
        { };
        ?>
         <div class="row" style="max-width:1200px; margin-right:auto; margin-left:auto;">
             <?php
        foreach ($job_info as $job_content)
        {
            $ranNum = rand(1, 3)
        ?>
... job data
            <?php
        } 
        ?>
        </div>
<?php
};
 ?> 

我的最终目标是同时为同一个 div (#result) 工作，并且能够滚动直到没有更多的工作，并做出一些选择，这将决定什么样的工作会出现，直到没有更多的工作。

我的主要问题似乎是 $pageno 变量没有被传输到 ajax 文件以在 sql $query 中重用，因此它不会返回任何内容。该页面应在加载时加载第一组结果，但除非我在 $offset 中添加 +1 而不是 -1，否则这些结果甚至不会显示。我试图更改第一个脚本中的内容，例如更改 $('#result').append(data); 到 $('#result').html(data) 但这并没有改变任何东西。我什至尝试将第一个脚本与第二个脚本结合起来以使它们一起工作，但这似乎也没有任何作用。

我有点不知道该去哪里以及如何从这里解决它，任何和所有关于甚至要研究的东西或我可以解决的任何其他方式的建议都将不胜感激。感谢您抽出宝贵时间和您在此问题上的帮助。

标签： phpjquerymysqlajax