通过ajax获取分页页面的内容，对其进行过滤并将其附加到当前页面

Question

I would like to load more functionality on my blog. I now have paginated pages, which is not what I want. I thought it would be easy to get the contents of these paginated pages via ajax, filter it, and append it to a div.

I'm not really sure if this is the way to go. This is what I tried:

$("a.next").on("click", function(e){
    e.preventDefault();
    var nextLink = $(this).attr("href");
    console.log(nextLink);

    $.ajax ({
      url: "http://localhost:8888/" + nextLink,
      datatype: 'html',
      type: "GET",
      success: function(data) {
        var response = data;
        $(".blogItems .holder").append(response);

      },
      error: function(xhr, status, error) {
        var err = eval("(" + xhr.responseText + ")");
        alert(err.Message);
      }
    });
  });

Can you guys point me in the right direction?

Answer 1

Your solution would work, providing that you'd detect the ajax call in the back end, and instead of the entire page, return just the parts where you are interested in (use Director::is_ajax() for that, and follow the hints in the comment of @micmania). If you would rather not make your controllers more complex and you don't mind the extra data being sent, you could also just retrieve the entire page (as you are doing now), and pick just the parts that you want to append to your existing document:

$.ajax ({
  url: "http://localhost:8888/" + nextLink,
  datatype: 'html',
  type: "GET",
  success: function(data) {
    var response= $("#theDivIWant", data); //<- Here (untested, but should do the trick
    $(".blogItems .holder").append(response);
  },
  error: function(xhr, status, error) {
    var err = eval("(" + xhr.responseText + ")");
    alert(err.Message);
  }
});

This solution also degrades nicely for people not using javascript, although I'm not exactlye sure if that's of any added value these days :-)