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就会在第二个ajax调用网址中附加第一个调用的 pFilter 变量，并且它会重新获取信息。

例如，如果我采用查理的时间戳并将其添加到网址中，它看起来像这样

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

它将显示查理作为JSON的回应，这意味着我将以查理和三角洲的形式重新定位。

现在我想在这里实现的是基于我想在用户点击刷新时检索新用户的时间戳（如果在这段时间内注册了）。

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

时间戳的原因是它检索新用户以及我使用其时间戳的最后一个用户..

基本上我要做的是，它应该在基于id的指定时间戳之后抓取用户。并准备好旧列表。

Answer 1

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

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

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

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

如果我误解了您并且我们会尝试寻找其他解决方案，请纠正我。

如何过滤Ajax响应并追加到最后一个响应？

1 个答案: