Результаты запроса AJAX дублируются при каждом доступе к странице результатов

Question

Я создаю веб-приложение, используя jQuery Mobile и AJAX для извлечения SQL-запросов с сервера с помощью PHP.

Обратный вызов в порядке, так как он отображает нужные мне значения.Проблема заключается в том, что при каждом доступе к странице одни и те же данные добавляются в список, создавая дубликаты.

Это запрос ajax:

function getNews() {
  $.ajax({
    url: 'http:mylivesite/news_ajax.php?',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    timeout: 5000,
    success: function(data, status) {
      $.each(data, function(i, item){
        var newNews = '<li>'+
        '<p>'+item.title+'</p>'+
        '<p>'+item.content+'</p>'+
        '</li>';
        $('#currentNews').append(newNews);  
      });
    },
    error: function() {
      output.text('There was an error loading the data.');
    }
  });
}

Я добавил cache: false, но результат тот же.Что я пропустил?

Answer 1

Используйте $('#currentNews').empty(); перед отправкой запроса.

Answer 2

Две области для изучения.

1. Когда вы получаете новости, сразу удаляйте текущие новости с помощью $('#currentNews').empty() на обратном вызове успеха.
2. Убедитесь, что вы не вызываете ajax-вызов дважды при аварии. Существуют ли какие-либо обратные вызовы или фрагменты кода, делающие этот вызов ajax дважды?

Answer 3

Ну, вот что происходит, когда вы добавляете вещи. Материал получает добавлено .

Пустой целевой элемент первым, если вам нужна семантика:

success: function(data, status) {
        $('#currentNews').empty(); // <-----------------
        $.each(data, function(i, item) {
            var newNews = '<li>'+
                                '<p>'+item.title+'</p>'+
                                '<p>'+item.content+'</p>'+
                               '</li>';
            $('#currentNews').append(newNews);
        });
}