Добавление элементов DOM после перезагрузки страницы при успешном вызове ajax

#javascript #jquery #ajax #dom #reload

#javascript #jquery #ajax #dom #перезагрузка

Вопрос:

         $.ajax({
        type        : 'POST',
        url         : requesturl,
        data        : data,
        dataType    : 'json',
        success     : function(data) {
            location.reload();
            $('#status').append(
                                // append something here!!
            );
            $('#loader').hide();                
        }
    });

У меня возникли некоторые проблемы, заставляющие страницу сначала перезагружаться, а затем добавлять мои элементы. Мне нужно, чтобы эта функциональность выполнялась, поскольку страница снова инициализируется при перезагрузке и уничтожает элементы, которые я пытаюсь добавить.

1. Вы не можете этого сделать. Вам нужно будет добавить хэш или строковую переменную запроса, а затем проверить ее существование.

2. Это звучит противоречиво. Почему вы используете AJAX для извлечения данных, когда вам все равно нужно перезагрузить страницу? Или почему вы хотите перезагрузить страницу?

3. Когда страница перезагружается, код JavaScript перестает выполняться . Это связано с тем, что браузеры не продолжают выполнять код для страниц, которые пользователь посещал в прошлом. Либо добавьте содержимое через AJAX без перезагрузки страницы , либо измените содержимое на стороне сервера во время перезагрузки страницы, прежде чем возвращать его клиенту.

Ответ №1:

Как только ты позвонишь location.reload() , будет уже слишком поздно. Скрипты не будут продолжать выполняться после перезагрузки страницы.

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

Ответ №2:

здесь не следует использовать location.reload(), вместо этого используйте $(‘.yoursubClass’).remove(), а затем вызовите метод append .

  $.ajax({
        type        : 'POST',
        url         : requesturl,
        data        : data,
        dataType    : 'json',
        success     : function(data) {
            $('#status').find('yourRemovableElements').remove(); //modify yourRemovableElements accordingly 
            $('#status').append(
                                // append something here!!
            );
            $('#loader').hide();                
        }
    });