使用ajax请求获取上一个和下一个对象

Question

我正在尝试创建一个 Ajax 函数，该函数将根据创建日期创建文章导航，因此用户可以使用上一个（旧）和下一个（新）链接浏览文章。

<div class="content clear">

  <div class="article">
    Article contents...
  </div>

  <a href="#Prev" id="prev" class="leftarrow" title="Previous">EELMINE<span class="arrow_left"></span></a>
  <a href="#"     id="bactolist" onClick="history.go(-1); return false;">Tagasi nimekirja juurde<span class="arrow_middle"></span></a>
  <a href="#Next" id="next" class="rightarrow" title="Next">JÄRGMINE<span class="arrow_right"></span></a>
</div> <!-- End content -->

<script type="text/javascript">

$.ajax({
  url: '/admin/api/site/articles.json?per_page=100',
  dataType: 'json',
  success: function(articles) {
    $(articles).each(function(index, article) {

      console.log(article);

      $('div.article').fadeOut(0);        
      $('div.article:first').fadeIn(500);  
      $('a.leftarrow, a.rightarrow').click( function (ev) {

        //prevent browser jumping to top
        ev.preventDefault();

        //get current visible item
        var $visibleItem = $('div.article:visible');

        //get total item count
        var total =  $('div.article').length;

        //get index of current visible item
        var index = $visibleItem.prevAll().length;

        //if we click next increment current index, else decrease index
        $(this).attr('href') === '#Next' ? index++ : index--;

        //if we are now past the beginning or end show the last or first item
        if (index === -1){
          index = total-1;
        }
        if (index === total){
          index = 0
        }

        //hide current show item
        $visibleItem.hide();

        //fade in the relevant item
        $('div.article:eq(' + index + ')').fadeIn(500);

      });                                               
    });
  }
});

我在构建负责根据日期值获取文章的函数时遇到了困难。

使用console.log(article)，我得到以下值：

body: "..."
comments_count: 0
comments_url: "..."
created_at: "date and time ..."
excerpt: "..."
title: "..."
url: "..."

所以应该可以使用created_at 变量进行导航，但我现在不知道该怎么做。 有什么想法吗？

使用的 CMS：Edicy 注意： CMS 不支持 PHP。

编辑：文章在 CMS 开发人员文档提供的“博客”页面上列出了 sample。

Answer 1

如果您的问题是如何对 ajax 调用收到的数据进行排序， 您可以在使用它们之前简单地使用 array.sort([compareFunction]) 。 （见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort）

像这样：

     ...
     success: function(articles) {

      articles.sort(function (a, b) {
        var d1 = new Date(a.created_at);
        var d2 = new Date(b.created_at);
        if (d1 < d2) return -1;
        if (d1 == d2) return 0;
        return 1;
     });

    $(articles).each(function(index, article) {

      // alert(article.created_at);

      console.log(article);
      ....

Answer 2

我检查了 edicy 上的 API，似乎它不允许您按 created_at 过滤。

但是根据您的代码，您可以使用查询字符串来获取特定页面中文章的当前索引。

例如：

以http://insenerid.edicy.co/uudised/2013/开头，也称为第1页。有4篇文章，您必须在每个文章URL中添加?page=1&index={0..3}，如下所示：

来自http://insenerid.edicy.co/uudised/2013/aasta-ehitusprojekt-2012-tiitli-kandidaadiks

致http://insenerid.edicy.co/uudised/2013/aasta-ehitusprojekt-2012-tiitli-kandidaadiks?page=1&index=1（因为这是第一页的第二篇文章）

然后，修改你的代码：

// This is for example: page = 1, index = 1
// You have to write extra code to get the query string you need.
var page = 1, index = 1;
$.ajax({
    url: '/admin/api/site/articles.json?per_page=100&page=' + page,
    // ...
    // Replace
    // $('div.article:first').fadeIn(500);
    // with
    $('div.article:eq(' + index + ')').fadeIn(500);

Answer 3

更简单的方法是尽可能多地使用模型，并使用 sql "limit" 我不知道你用的是什么数据库，所以我会用mysql数据库做一些步骤。 我对您的代码感到困惑，为什么您在没有任何压力的情况下调用 ajax？或者你隐藏了一些代码？

让我试试这段代码： 假设你有一个容器 div 和 2 个静态导航按钮

<a href="#" id="next" data-page="2">Next</a>
<a href="#" id="back" data-page="0">Back</a>

<div id="container"></div>

<script>
  $("#next, #back").click(function(){
    //get page number 
    //0 means no page to load
    var page = $(this).data("page");
    if(page == 0)return false;
    $.ajax({
      url : "your/url/?page=" + page,
      dataType: "json",
      success : function(data){
        var container = $("#container");
        $.each(data, function(index, article){
          container.append(article); // or do something you want
        });
        if($this.attr("id") == "next") $("#next, #prev").data("page", $this.data("page") + 1);
        else $("#next, #prev").data("page", $this.data("page") - 1);
      }
    });
  });
</script>

后端：

    <?php
    $page = $_GET["page"];
    $perPage = 100;
    $start = ($page - 1) * $perPage; // minus 1, because limit start from 0

    $sql = "SELECT * FROM table WHERE 1=1 LIMIT $start, $perPage";

    //execute the sql and get the result (ex. result)

    echo json_encode($result);

希望我的回答对你有所帮助。