【问题标题】:Load more articles from json feed从 json feed 加载更多文章
【发布时间】:2013-03-08 21:13:44
【问题描述】:

我需要一些 ajax/jquery 请求的帮助,以便从 json feed 加载更多文章。

$(document).ready(function () {
var output = $('#news');
var count = "2";
var page = "1";
$.ajax({
    url: 'http://domain.com/api/get_recent_posts/?post_type=news&count=' + count + '&page=' + page + '&callback=?',
    async: false,
    callback: 'callback',
    crossDomain: true,
    contentType: 'application/json; charset=utf-8',
    type: 'POST',
    dataType: 'jsonp',
    timeout: 5000,
    success: function (data, status) {
        $.each(data.posts, function (i, item) {
            var news = '<li>' + item.title + '</li>';
            output.append(news);
        });

        if (data !== undefined && data !== undefined) {
            $('#stats').append('Page ' + page + ' of ' + data.pages + ' | Total posts ' + data.count_total + '');
        }

    },
    error: function () {
        output.html('<h1 class="error">There was an error loading the data.</h2>');
    }
});
});

我需要的是:通过单击链接(加载更多)页面应该显示来自“var page = '2'”的标题等等,但是当它到达最后一页时,链接应该消失。希望它确实有意义。

请看下面的现场小提琴: http://jsfiddle.net/AGGjj/

非常感谢。

【问题讨论】:

  • 我在链接上看不到点击事件?您应该增加 pagecount 值以加载新的 url。
  • if (data !== undefined &amp;&amp; data !== undefined)?仔细检查?

标签: jquery ajax


【解决方案1】:

对于每一个有答案的人:

$(document).ready(function () {

var output = $('#news');
var count = "2";
var page = "1";
var load = function() {
$.ajax({
    url: 'http://domain.com/api/get_recent_posts/?post_type=news&count=' + count + '&page=' + page + '&callback=?',
    async: false,
    callback: 'callback',
    crossDomain: true,
    contentType: 'application/json; charset=utf-8',
    type: 'POST',
    dataType: 'jsonp',
    timeout: 5000,
    success: function (data, status) {
        $.each(data.posts, function (i, item) {
            output.append($('<li />').text(item.title));
        });

        if (data !== undefined && data !== undefined) {
            $('#stats').text('Page ' + page + ' of ' + data.pages + ' | Total posts ' + data.count_total + '');
        }
        if (page == data.pages) {
             $("#loadmore").remove();
        }
        page++;

    },
    error: function () {
        output.html('<h2 class="error">There was an error loading the data.</h2>');
    }
});
};
//add click handler
$('#loadmore').click(function() {load();});
//load first page
$('#loadmore').trigger('click');
//or
load();
});

【讨论】:

  • 百万感谢 JoDev,有什么方法可以避免相乘 - 第 1 页,共 3 页 |帖子总数 6
  • 已经完成了。我在同一时间看到了这个问题 :) 我只是将“.append”替换为“.text”
  • 你是一个了不起的开发者 JoDev!
【解决方案2】:

在成功函数末尾添加

success: function (data, status) {
    $.each(data.posts, function (i, item) {
        var news = '<li>' + item.title + '</li>';
        output.append(news);
    });

    if (data !== undefined && data !== undefined) {
        $('#stats').append('Page ' + page + ' of ' + data.pages + ' | Total posts ' + data.count_total + '');
    //just test if the current page is the last one
    if(page == data.pages) {
       $('link selector').hide();
       or remove
       $('link selector').remove();

    }
    }

},

【讨论】:

  • 如何显示更多文章,目前它只显示第 1 页中的 2 篇,但我需要通过单击 Load More 等从第 2 页再显示 2 篇,直到我到达最后一页,然后加载更多应该被删除
  • 不要忘记在成功函数(page++;)的末尾增加“page”变量。
  • 我真的很抱歉再次询问,但我对 jquer/ajax 完全是个疯子,你能调整一下我的小提琴吗?非常感谢您对 JoDev 的帮助。
  • 好的,完成了。你忘了像 soyuka 说的那样添加点击处理程序。
  • 以后不要发布新的答案;编辑您现有的答案。
猜你喜欢
  • 2015-03-02
  • 1970-01-01
  • 1970-01-01
  • 2012-08-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-29
  • 1970-01-01
相关资源
最近更新 更多