如何篩選Ajax響應並追加最後一個響應？

如何根據來自服務器的ID過濾響應並追加上一個響應。如何篩選Ajax響應並追加最後一個響應？

讓我把代碼和解釋我的問題。

我的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 retrives從服務器和存儲最後一個值的時間以可變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中出現，並且它將檢索信息。

例如，如果我把查理的時間戳，並在網址appened，它看起來像這樣

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

，它會顯示從查理的JSON響應，這意味着我將得到reposne查理和三角洲。

現在我想在這裏實現的是基於時間戳我想檢索新用戶（如果在此時註冊），當用戶單擊刷新。

比方說，第一個AJAX後，有兩個用戶加入即回聲和狐步舞...現在，當用戶點擊刷新就應該抓住，從服務器的用戶。

因爲這retrives新用戶，我用它自己的時間戳的最後一個用戶的時間戳的..

基本上我所試圖做的是，它應該根據id指定的時間標記後搶用戶。並將其預備到舊清單。

來源

2016-12-30 Em Ji Madhu

請更正這個提琴，因爲我可以清楚地看到響應中有什麼錯誤（它沒有直接的id屬性），並且第一個ajax調用中未定義「dvalue」。我嘲笑你的ajax請求：https：//jsfiddle.net/gm7amtjz/ –

@latosinski：感謝小提琴。我已經在這裏更新了小提琴https://jsfiddle.net/emjimadhu/4ncqL0n0/2/現在在第二個Ajax接收像這樣的數據，因爲我包括最後一個用戶時間，而查詢到服務器。所以它會從那個時間戳得到結果..現在我想要的是我不想包括第一個但包括響應中的所有其他內容。和2），你可以看到，當我點擊刷新新數據去列表的底部..我想它在現有的響應頂部..！ –

首先，您必須將初始數據存儲在某處。我會建議你的名單內的數據屬性。

$('#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

糾正我，如果我誤解了你，我們會盡量找一些其他的解決辦法。

來源

2016-12-30 10:16:35

如何篩選Ajax響應並追加最後一個響應？

回答

相關問題