AJAX - 页面刷新双倍结果

Question

我有这段代码，它使用 AJAX 显示来自 XML 提要的一些位置：

$.ajax({
    type: "GET",
    url: "testxml.xml",
    dataType: "xml",
    success: function(xml) {
        $(xml).find("Country[Name='"+localStorage.ArrivalCountry+"']").find('Destination').each(function(){
            var destinationName = $(this).attr('Name');
            $('<a class="listItem" href="#" id="'+destinationName+'">'+destinationName+x+'<div class="arrow"></div></a>').appendTo('#destinationList');
        });

    }
});

第一次正确显示，但如果我刷新页面，它会显示每个结果两次。如果我再做一次，它会显示三遍，依此类推。

Answer 1

在添加更新集之前，您需要从#destinationList 中获取empty() 之前的 AJAX 调用数据：

$.ajax({
    type: "GET",
    url: "testxml.xml",
    dataType: "xml",
    success: function(xml) {
        $("#destinationList").empty(); // This will clear out all the previously appended 'a' elements
        $(xml).find("Country[Name='"+localStorage.ArrivalCountry+"']").find('Destination').each(function() {
            var destinationName = $(this).attr('Name');
            $('<a class="listItem" href="#" id="'+destinationName+'">'+destinationName+x+'<div class="arrow"></div></a>').appendTo('#destinationList');
        });
    }
});

更多关于empty()的信息