Как правильно работать с ajax?

Друзья, появилась такая вот проблема..

Начну пожалуй со структуры аjax запроса

$.ajax({  
        url: window.location.href,  
        cache: true,  
        success: function(html){  
            $("body").html(html);
        }  
});


Цель этого запроса - обновить страницу после закрытия модального окна.
Работает этот подход отлично, но с небольшим исключением:

5e9c19d7e31aa627031511.png

То есть происходит дублирование стилей, а если быть более точнее (не буду расписывать по полочкам стандарты HTML верстки, думаю все знают): в тело страницы (<body></body>) загружается вся структура с контейнера <head></head>

Вопрос: Как это предотвратить? Или может быть есть какой нибудь иной вариант?
  • Вопрос задан
  • 79 просмотров
Пригласить эксперта
Ответы на вопрос 2
zkrvndm
@zkrvndm
Архитектор решений
Попробуйте один из этих 2 вариантов.

Вариант первый:
$.ajax({  
        url: window.location.href,  
        cache: false,  
        success: function(html){
                var page = document.createElement('page'); // Создаем пустой элемент с тегом page
                page.innerHTML = html; // Записываем в него ответ сервера
                var body = page.querySelector('body').innerHTML; // Считываем с него содержимое тега body
                document.querySelector('body').innerHTML = body; // Записываем спасренный код на страницу
        }  
});

Второй вариант:
$.ajax({  
        url: window.location.href,  
        cache: false,  
        success: function(html){
                document.write(html); // Перезаписываем текущий документ полностью
                document.close(); // Закрываем запись
        }  
});
Ответ написан
Комментировать
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
$("body").html(html);
В тело нужно вставлять не весь ответ, а только содержимое тега <body> из ответа
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы