javascript - 第一次使用 AJAX，通过 AJAX 进行 JSON 循环，数据分布在多个页面上？

Question

第一次使用 AJAX 用户。我有 15 组数据希望用户一次引入。即:

{"status":"Success","message":"My contents","data":[
  {"Contents":{"id":"1","Type":"fb","profileId":"123456","profileName":"Test1","profileImage":"https:\/\/fbcdn-profile-a.akamaihd.net\/hprofile-ak-xfp1\/t1.0-1\/p50x50\/10337453_7117502132131244_84974578537125246499_t.jpg","postMessage":"Hello \u2022 Test \u2022 testing message \u2022"}},
  {"Contents":{"id":"2","Type":"fb","profileId":"1234567","profileName":"Test2","profileImage":"https:\/\/fbcdn-profile-a.akamaihd.net\/hprofile-ak-xfp1\/t1.0-1\/p50x50\/10347453_7117503245184844_8497457853733242234_t.jpg","postMessage":"Hello \u2022 Test \u2022 testing message \u2022"}}
]}

最初的 15 个使用 URL http://www.example.com/services/request/，之后用户可以按“加载更多”，然后从 http://www.example.com/services/request/获取下一个 15 code>http://www.example.com/services/request/page2，再次点击“加载更多”并从http://www.example.com/services/request/page3<获取 等等

我意识到我需要在这里做一些事情:
- 在文档加载时，运行第一个ajax请求
- 可能使用 .stringify 解析 JSON，尽管我在下面的尝试中没有使用它，但不确定是否需要？
- 添加“加载更多”功能，以便当用户按下它时，它将从下一页获取数据，依此类推

对于数组中的每个对象，数据应作为新的 div 添加到 container 中，即使用第一个对象:

<div id="container">
  <div class="fb"> <!--type as class-->
    <div class="name">Test1</div> <!--text from profileName-->
    <div class="image"><img src="https:\/\/fbcdn-profile-a.akamaihd.net\/hprofile-ak-xfp1\/t1.0-1\/p50x50\/10337453_7117502132131244_84974578537125246499_t.jpg" /></div><!--image url from profileImage-->
    <div class="message">Hello \u2022 Test \u2022 testing message \u2022</div><!--text from postMessage-->
  </div> <!--end of generated object-->
</div> <!--//container-->

我尝试加载文档(初始请求):

    $(function() { //document ready
        $.getJSON('http://www.example.com/services/request/', function(data) {
          $.each(data, function(index) {
          $('#container').append(
            $('<div class="'+data.type+'">'), 
            $('<div class="name">').html(data.profileName),
            $('<div class="image">').html("<img src='+data.profileImage+' < />"),
            $('<div class="message">').html(data.postMessage)
          )
        });
    });
});

好吧，我将此附加到#container，但不正确..为什么？另外，“未定义”div 应该是 fb 类，应该包裹在其下面的其他 div 周围。

<div class="undefined"></div>
<div class="name"></div>
<div class="image">
<img <="" src="+data.profileImage+">
</div>
<div class="message"></div>

Answer 1

有两件事:将您已经在单独的函数中工作的请求，例如。 loadPage(因此您不必重写该函数)。让它不加载直接 url，而是将其作为参数。

因此，在文档加载时，将 page 变量设置为 1，并从该页面开始第一次运行。

添加“加载更多”按钮和按钮处理程序，该处理程序将调用 loadPage 并包含页面变量。

例如。

$(document).ready(function() {
    // set this here so that it is kept in reach.
    var page = 2;

    // this will call the required url, assemble it as needed.
    function loadPage(page) {
        var url = 'http://www.example.com/services/request/' + page;
        $.getJSON(url, function(data) {
            $.each(data, function(index) {
                $('#container').append(<YOURDATAHERE>);
            });
          )
        }
    }

    // This is the Load More handler - attach it to the button.

    function loadMore() {
        loadPage('page' + page);
        page = page + 1;
    };

    // Now make the first, initial run with no 'page1' as in your example.
    loadPage('');
});

如果需要，您可以以类似的方式实现分页器。