javascript - 如何过滤 Ajax 响应并附加到最​​后一个响应之上？

Question

如何根据来自服务器的 ID 过滤响应并附加到最​​后一个响应。

让我输入代码并解释我的问题。

我的jquery

baseURL = 'http://192.168.23.110';

if ($('body').is('#body__page1')) {

var pFilter;

// First Ajax on document load
$.ajax({
    url: baseURL + '/page1/',
    type: "GET",
    dataType: 'json',
    async: false,
    success: function(response) {
        var total = 0;
        $.each(response.id, function() {
            total += parseInt(this, 10);
        });
        var pvalue = response.sort(function(a, b) {
            return (b.id - a.id);
        });

        pFilter = dvalue[1].time;

        $.each(pvalue, function(key, value) {
            $('#page1__view').append('<li> <a href="#!"> <h3>' + value.username + '</h3> </a> </li>');
        });

    },
    error: function(xhr, err) {
        console.log(xhr.readyState);
        console.log(xhr.status);
        console.log(xhr.responseText);
    },
    complete: function(xhr, status) {
        console.log(xhr.status);
    }
});

//Second Ajax on button click
$('#page1__refresh').on('click', function() {
    $.ajax({
        url: baseURL + '/page1/?filter=' + pFilter,
        type: "GET",
        dataType: 'json',
        success: function(response) {
            var total = 0;
            $.each(response.id, function() {
                total += parseInt(this, 10);
            });
            var dvalue = response.sort(function(a, b) {
                return (b.id - a.id);
            });
            $.each(dvalue, function(key, value) {
                $('#page1__view').append('<li> <a href="#!"> <h3>' + value.username + '</h3> </a> </li>');
            });
        },
        error: function(xhr, err) {
            console.log(xhr.readyState);
            console.log(xhr.status);
            console.log(xhr.responseText);
        },
        complete: function(xhr, status) {
            console.log(xhr.status);
        }
    });
});

}

服务器响应

[
{
    "id": 1,
    "username": "alfa",
    "time": "2016-12-29T08:56:11.607610Z",
},
{
    "id": 2,
    "username": "bravo",
    "time": "2016-12-29T08:56:12.616765Z",
},
{
    "id": 3,
    "username": "charlie",
    "time": "2016-12-29T08:56:13.596835Z",
},
{
    "id": 4,
    "username": "delta",
    "time": "2016-12-30T06:00:13.250253Z",
}

]

正如您在 jquery 代码中看到的那样。我有两个 Ajax 调用，一个是文档就绪，另一个是单击按钮。

第一个ajax从服务器成功检索并将最后一个值的时间存储在变量pFilter中，并且数据在UL中填充为

<ul id="page1__view">
<li> <a href="#!"> <h3>alfa</h3> </a> </li>
<li> <a href="#!"> <h3>bravo</h3> </a> </li>
<li> <a href="#!"> <h3>charlie</h3> </a> </li>
<li> <a href="#!"> <h3>delta</h3> </a> </li>
</ul>

现在，在第二个 ajax 上，每当用户单击按钮时，第一次调用的 pFilter 变量就会附加到第二个 ajax 调用 URL 中并检索信息。

例如，如果我获取查理的时间戳并附加在网址中，它看起来像这样

http://192.168.23.110/?filter=2016-12-29T08:56:13.596835Z

它会将 Charlie 的响应显示为 JSON，这意味着我将得到 Charlie 和 Delta 的回复。

现在我想在这里实现的是基于当用户单击刷新时我想要检索新用户(如果此时注册了任何用户)的时间戳。

例如，在第一个 ajax 之后，添加了两个用户，即 Echo 和 foxtrot。现在，当用户单击刷新时，它应该从服务器获取该用户。

由于时间戳的原因，它会检索新用户和我使用时间戳的最后一个用户..

基本上我想做的是，它应该根据 id 在指定时间戳之后抓取用户。并将其添加到旧列表中。

Answer 1

首先，您必须将初始数据存储在某处。我建议在您的列表中作为数据属性。

$('#page1__view').data('users', pvalue);

现在，在每个后续调用中，只需进行一个简单的差异提取唯一用户并将它们全部附加到您的列表中:

var oldUsers = $('#page1__view').data('users');
var users = [...oldUsers, ...response]; //merge two arrays
var newUsers = getUnique(users, 'id');

var pvalue = newUsers.sort(function(a, b) {
  return (b.id - a.id);
});

// here we are replacing old list with the new one
$('#page1__view').empty();

$.each(pvalue, function(key, value) {
  $('#page1__view').append('<li> <a href="#!"> <h3>' + value.username + '</h3> </a> </li>');
});

$('#page1__view').data('users', pvalue);

当然，您可以添加一些 if 语句来检查是否有任何更改，这样您就不会不必要地弄乱 DOM。

FIDDLE和 DIFF

如果我误解了您的意思，请纠正我，我们会尝试找到其他解决方案。