php - 服务器端 (PHP) 使用 Ajax 和无限滚动进行过滤和排序-6ren

php - 服务器端 (PHP) 使用 Ajax 和无限滚动进行过滤和排序

转载作者：搜寻专家更新时间：2023-10-31 20:42:15

我已经在我的项目 (https://github.com/webcreate/infinite-ajax-scroll) 中实现了 infinite-ajax-scroll 插件。它是一个显示一长串 div 的 PHP 项目。无限滚动使用服务器端分页。我也有服务器端过滤和排序，理想情况下希望它使用 Ajax，以便它与我的无限滚动很好地配合使用。如何使用 Ajax 传递过滤器？我找到了有关如何使用 JQuery 进行过滤的教程，但没有找到使用 PHP 进行过滤的教程。

我确实找到了 http://isotope.metafizzy.co/它具有过滤和无限滚动功能，但在文档中它建议不要同时使用这两种功能，这对我来说是一个巨大的耻辱，因为它看起来像一个很棒的插件。

任何人都可以建议我最好的方法吗？如果我需要在选择新过滤器时重置无限滚动，那很好。但是我该怎么做以及如何将选定的过滤器传递给无限滚动？

以下是我到目前为止的内容。

    $cat = (isset($_GET['cat']) ? urldecode($_GET['cat']) : ''); 
    $page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
    $start = ($page * $pagelimit) - $pagelimit;
    $limit = $pagelimit*$page; 

    //get total number of discounts for search
    $total_items = Stuff::countItems($cat);

    if( $total_items > ($page * $limit) ){
      $next = ++$page;
    }

    //get items
$items = Stuff::getItems($cat, $sortby, $dir, $start, $limit);

if(!$items){
  header('HTTP/1.0 404 Not Found');
  echo 'Page not found!';
  exit();
} 

?>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-ias.min.js"></script>
        <script type="text/javascript">
          $(document).ready(function() {
            // Infinite Ajax Scroll configuration
            jQuery.ias({
              container : '.wrap', // main container where data goes to append
              item: '.item', // single items
              pagination: '.paginate', // page navigation
              next: '.paginate a', // next page selector
              loader: '<img src="css/ajax-loader.gif"/>', // loading gif
              noneleft: 'No more items', //Contains the message to be displayed when there are no more pages left to load
              triggerPageThreshold: 5, // show "load more" if scroll more than this to stop
              trigger: "Load more items"
            });
          });
        </script>
    </head>
    <body>
    <div class="wrap">    
        <?php
        echo 'TOTAL: '.$total_items .'<br />';

        //filter through categories*/
        echo 'FILTER BY CATEGORY:';
        foreach ($categories as $category){
            $categoryURL = urlencode($category);
            echo "<a href=\"index.php?cat=$categoryURL\">$category<a/> | ";
        }       
        //loop through and display items
       foreach ($items as $id => $item){

           echo "<div style=\"border:1px solid green;margin-bottom:5px;\" class=\"item\" id=\"item-$id\">
                    ID: $id <br />
                    $item[name]<br />                                                                                                                                                                                                                                
                    $item[cat]<br />
                    $item[description]<br />
            </div>";
        }
        ?>
    <!--paginagation-->
    <?php if (isset($next)): ?>
    <div class="paginate">
      <a href='index.php?cat=<?php echo $cat?>&p=<?php echo $next?>'>Next</a>
    </div>
    <?php endif?>
    </div>
    </body>
</html>

最佳答案

只有在客户端(针对已加载的数据)和服务器(针对 future 要加载的页面)都应用过滤器时，无限滚动和过滤才有意义。

但在应用了一些完全不同的过滤器或排序之后，我认为用户希望被带回第一页(或滚动回顶部以进行无限滚动)。丢失一些已经加载的结果是唯一的方法。你也许可以 cache这些结果稍微提高了速度。

为简化此过程，我建议您开始使用 KnockoutJS或一些类似的客户端 MVC 库。 jQuery 非常适合处理如此复杂的问题。有时您会发现自己需要更好的东西。

Here's a cleaned up extract我前段时间开发的一个应用程序需要类似的东西。 ( edit link )

您根本不需要那个“page”参数。我使用它是为了让我的“假”提供者可以返回顺序的、可读的名称。

服务器端您需要随时了解当前查询(可能是 $_SESSION)您已向客户端发送了多少结果。

像这样:

function getResults($query) {
    if($_SESSION['query']['category'] !== $query['category']) {
        if(!array_key_exists($query['category'], $_SESSION['resultsSent'])) {
            $_SESSION['resultsSent'][$query['category']] = 0;
        }
        $_SESSION['query'] = $query; 
    }

    $sql = 'SELECT * FROM foo WHERE category = ? LIMIT ?, ?';
    $data = $db->select($sql, array($_SESSION['query']['category'],  $_SESSION['resultsSent'][$query['category']], 10);

     $_SESSION['resultsSent'][$query['category']] += count($data);

    return json_encode($data);
}

if(!array_key_exists('query', $_SESSION)) {
    $_SESSION['resultsSent'] = array();
    $_SESSION['query'] = array(); // maybe some defaults here?
}

if(array_key_exists('query', $_POST)) {
    echo getResults($_POST['query']);
}

您必须编写一个执行 AJAX 调用的 resultsService。大概是这样的:

function resultsService() {
    this.query = function(query, success) {
        jQuery.post({
            url: 'index.php', 
            data: query,
            success: success
        });
    }
}

之后，您所要做的就是将无限滚动库放在顶部。

这依赖于以下事实:(1) 在客户端上，您永远不会删除已加载的数据，如果它不适合当前过滤器，您只需将其隐藏，以及 (2) 对于每个可能的过滤器组合，您的服务器知道它有多少数据发送，这样它就不会再次发回。

如果您有更复杂的过滤器，其结果不是唯一的(多个过滤器组合可能会返回一个结果 - 想想价格、评级和数量房间，而不是类别)，那么您最终将向客户发送副本。除了重置整个列表之外，没有真正的解决方案。您可以尝试跟踪您发送给客户端的所有单个结果，而不仅仅是计数，并在查询时将它们过滤掉 (WHERE id NOT IN (1, 2, 17, 20, ... )) 但这绝对不适用于大量数据。

对于排序，除了确切地知道您发送给客户端的内容或者显然是重置列表之外，绝对没有其他解决方案。

我正在 POST 将 JS 对象作为 JSON 编码字符串 (ko.toJS(this.query)) 然后 json_decode用 PHP 编写它。无论您如何构建该 JS 对象，将其作为 JSON 发送都比您自己手动将其序列化为 GET 参数要好。

此外，如果您对所有过滤器类型使用通用格式并通过服务器端设置的模式来处理它们，那也是最好的。

对于 ['category': 1, 'subcategory':2, 'user': 1234] 我会定义 categoryFilter, subcategoryFilter 和 userFilter，使用 call_user_func 调用它们并将过滤后的值作为参数传递给您的查询，并为每个值添加位。

$query = DB::table('stuff');

$filters = json_decode($_POST['query']);
foreach($filters as $filterName => $value) {
    $query = call_user_func_array($filterName . 'Filter', array($query, $value));
}

$results = $query->get();

function categoryFilter($query, $value) {
    $query->where('category_id', '=', $value);

    return $query;
}

您的实际代码的外观以及构建 SQL 查询的难易程度取决于您使用的是什么。我在上面使用的数据库类是与 Laravel 捆绑在一起的.

即使使用基本的 jQuery，在客户端构建查询对象也不应该那么困难。

关于php - 服务器端 (PHP) 使用 Ajax 和无限滚动进行过滤和排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19516377/

文章推荐： php - 什么时候需要在实例化之前定义一个类？

文章推荐： php - REMOTE_USER 和 PHP_AUTH_USER 有时为空

文章推荐： php - 是否可以在没有 htaccess 文件的情况下重写 URL？

ajax - Comet, Ajax Push, Reverse Ajax
有人有 Comet 应用程序 .net 的任何样本吗？我需要一个示例如何在服务器中保持客户端的连接？最佳答案这里也有一些不错的: http://www.frozenmountain.com/we
ajax - Yii2:ajax 提交表单上的 ajax 表单验证
我想知道是否有 Yii2 专家可以帮助我了解如何最好地使用 ajax 表单与 Yii ajax 验证相结合。我想我可以在不带您阅读我所有代码的情况下解释这个问题。我正在处理一个促销代码输入表单，用户
ajax - Ajax 和 Jquery-Ajax 之间的区别
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果
ajax - f :ajax and a4j:ajax? 和有什么区别吗
f:ajax 和 a4j:ajax 标记之间有什么显着差异吗？我知道 Richfaces 4 中的 a4j:ajax 基于 native f:ajax JSF2 标记，添加了一些 f:ajax 中未
ajax - 在 $.ajax() 中将数组传递给 ajax 请求
我已经尝试过这样但无法获取数组列表。它返回“null” var data=[]; data[0] = '1'; data[1] = '2'; $.ajax({
ajax - jQuery.ajax 和 $.ajax 是一样的吗？
在教程中可以看到 jQuery.ajax 和 $.ajax 喜欢这里 http://www.thekludge.com/form-auto-save-with-jquery-serialize/ jQ
ajax - Ajax 会降低性能吗？
过度使用 AJAX 会影响性能吗？在大型 Web 应用程序的上下文中，您如何处理 AJAX 请求以控制异步请求？最佳答案过度使用任何东西都会降低性能；在必要时使用 AJAX 将提高性能，特别是如果
ajax - 使用 Ext.Ajax.request 的跨域 Ajax
似乎我无法使用 Ext.Ajax.request 进行跨域 ajax 调用。看起来 ScriptTag: True 没有任何效果。这是我的代码: {
ajax - AJAX 调用后的渲染问题
我正在使用 Bottle 微框架(但我怀疑我的问题来自它) 首先，如果我定义了一个从/test_redirect 到/x 的简单重定向，它会起作用。所以 Bottle redirect() 在简单的情
ajax - Ajax 库的比较
任何人都可以指出各种 AJAX 库的统一比较吗？我已经阅读了大约十几种不同的书，我即将开始一个项目，但我对自己是否已经探索了可能性的空间没有信心。请注意，我不是在要求“我认为 XXX 很棒”——我正
ajax - 哪些情况下不应使用 AJAX？
似乎使用 AJAX 的站点和应用程序正在迅速增长。使用 AJAX 的主要原因之一可能是增强用户体验。我担心的是，仅仅因为项目可以使用 AJAX，并不意味着它应该。可能是为了 UX，AJAX 向站点/
ajax - ajax 页面的永久链接最佳实践
假设我有一个可以通过 Javascript 自定义的“报告”页面。假设我有可以更改的 start_date、end_date 和类型(“简单”或“完整”)。现在我希望地址栏始终包含当前(自定义) V
ajax - 我是否正确理解了 Ajax？
我一直在阅读 Ajax 并且希望从 stackoverflow 社区看到我是否正确理解所有内容。因此，正常的客户端服务器交互是用户在 url 中拉出 Web 浏览器类型，并将 HTTP 请求发送到服
ajax - AJAX 可以提交基本身份验证的凭据吗？
这可能有点牵强，但让我们假设我们需要它以这种方式工作: 我在服务器的 web 根目录中有一个 index.html 文件。该文件中的 javascript 需要向/secure/ajax.php 发出
ajax - AJAX 检查用户名功能的安全性
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 去年关闭。 Improve this
ajax - Ajax 发布后重定向
我希望ajax post成功进入主页。由于某种原因，我一直做错事。知道我应该做什么来解决这个问题吗？ window.APP_ROOT_URL = ""; Ajax $.ajax({ url: '#{a
ajax - Jquery 在第一个 ajax 函数调用完全完成后继续另一个 ajax 函数
我在 2 个不同的函数中有 2 个 ajax 调用。我想用.click来调用这2个函数。 func1 将数据插入数据库，然后 func2 检索数据，所以我的问题是如何等到 func1 完全完成然后只执
ajax - AJAX 请求时禁用按钮
我试图在单击按钮后禁用该按钮。我尝试过: $("#ajaxStart").click(function() { $("#ajaxStart").attr("disabled", true);
ajax - RAILS 6 Ajax 事件和 Ajax Spinner
我试图在每个 Ajax 请求上显示加载动画/微调器我的 application.js $(document).on("turbolinks:load", function() { window.
ajax - ajax settimeout刷新div
我正在显示使用jQplot监视数据的图形。为了刷新保存该图的div，我每5秒调用一次ajax调用(请参见下面的JavaScript摘录)。在服务器上，PHP脚本从数据库中检索数据。成功后，将在5

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

php - 服务器端 (PHP) 使用 Ajax 和无限滚动进行过滤和排序