Ajax請求存儲舊數據

Question

我有一個小問題，我的ajax請求，我還沒有找到解決方案。

我試圖做到：

我有簡單的搜索，當我提出我的數據發送到返回JSON作爲結果的PHP文件。然後我將返回的數據添加到可點擊列表中，當我點擊一個列表項時，我想在新的div中顯示數據。這實際上工作正常。即使我開始一個新的搜索，我得到正確的json對象和列表更新如預期，但現在我有以下問題。如果我在不刷新整個頁面的情況下重新開始搜索並再次單擊某個列表項目，則在控制檯日誌中，我發現新的但也是之前的數據仍然存儲在列表或任何地方，這是問題，因爲我之後如果我點擊列表項目顯示錯誤的數據。

我希望你明白我的問題，我很感謝每一個提示。順便說一下，我的方法甚至有可能，或者有更好的方法來解決這個問題嗎？

Javascript代碼

 <form id="searchbar"> 
     <div class="input-group form-group-lg"> 
      <input type="text" id="searchQuery" name="query" class="form-control" autocomplete="off" placeholder="Name, ZIP, State"> 
      <span class="input-group-btn"><button class="btn btn-success btn-lg" id="searchButton" type="submit">Search</button></span> 
     </div> 
     <form> 

Answer 1

好吧，我解決了它。我不得不刪除點擊事件處理程序

$('.list-group').off('click'); 

在我的resetInfos函數中。

Answer 2

您正在使用id選擇刪除多個元素

$('#searchbar').submit(function(e){ 
    e.preventDefault(); 
    var query = $('#searchQuery').val(); 
    if (query != ''){ 
     loadData();    
    }else{ 
     alert('Empty searchform!'); 
    } 
}); 

function loadData(){ 
    var query = $('#searchQuery').val(); 
    $.ajax({ 
     type: "POST", 
     url: "search.php", 
     data: {'query': query}, 
     dataType: 'json' 
    }).done(function(res) { 
      console.log(res); 
      resetInfos(); 
      generateList(res); 
      $('.list-group').on('click', '.list-group-item', function(e){ 
       var index = $(this).index(); 
       console.log(res[index].Name); 
       $('#locationName').text(res[index].Name); 
       $('#locationAddress').text(res[index].Zip 
       + ' ' 
       + res[index].State); 
       $('#locationContact').text(res[index].Internet); 
       init_map(res[index].Latitude, res[index].Longitude); 
      }); 
     });  
} 

function resetInfos(){ 
    $('.list-group').empty(); 
    $('#listItems').remove(); 
    $('#searchQuery').val(''); 
    $('#locationName').text(''); 
    $('#locationAddress').text(''); 
    $('#locationContact').text('');  
} 

function generateList(result){ 
    $.each(result, function(i){ 
     $('.list-group').append('<li class="list-group-item" id="listItems">' 
     + result[i].Name 
     + ", " 
     + result[i].Zip 
     + " " 
     + result[i].State); 
    }); 
} 

HTML搜索表單。

$('#listItems').remove(); 

它只會刪除第一個匹配的參考。請給li元素添加一些類，然後使用類選擇器刪除。

希望它的作品！