Question

我的ajax请求存在问题，但我还没有找到解决方案。

我想要完成的任务：

我有简单的搜索表单，当我提交时，我将数据发送到PHP文件，该文件将结果返回为json。然后我将返回的数据添加到可点击列表中，当我单击一个列表项时，我想在新div中显示数据。这实际上很好。即使我开始一个新的搜索，我得到正确的json对象和列表更新按预期，但现在我有以下问题。如果我在没有刷新整个页面的情况下开始新的搜索并再次单击列表项，则在控制台日志中我看到新的以及之前的数据仍然存储在列表或任何地方，这就是问题因为我然后如果单击列表项，则显示错误的数据。

我希望你理解我的问题，我感谢每一个提示。顺便说一下，我的方法是否可行，还是有更好的解决方法？

Javascript代码

$('#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搜索表单

      <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

您正在使用ID选择器删除多个元素。

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

它只会删除第一个匹配的引用。请将一些类添加到li元素，然后使用类选择器删除。

Answer 2

好的，我解决了。我不得不用

删除click事件处理程序

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

在我的resetInfos函数中。

Ajax请求存储旧数据

2 个答案: