Почему перезагрузка невидима в ajax, но видна из консоли? - PullRequest
Новая
       1

Почему перезагрузка невидима в ajax, но видна из консоли?

2 голосов
/ 04 мая 2019

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

У меня есть index.php и input.php, когда я нажимаю на кнопку отправить в форме на index.php, данные из формы отправляются на input.php, а затем данные проверяются, помещаются в базу данных MySQL. Если к тому моменту все было в порядке, сервер просто возвращается в ответ: 

<script>location.reload();</script>

Вот как я отправляю этот запрос: 

$.ajax({
    url: $("#input_form").attr("action"),
    data: formData,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function(info){$("body").html(info);}
});

Так что, по сути, страница должна быть перезагружена, если все прошло нормально. Это работает, мы можем увидеть новые данные на странице.

Вопросы:

1) Почему перезагрузка страницы буквально невидима? Какой механизм позади? Поскольку я получаю html-изменения всего тела в тег скрипта с функцией перезагрузки внутри, следовательно, это должно быть похоже (если не то же самое) на размещение $('body').html("<script>location.reload()</script>") в консоли браузера, но разница видна очень хорошо - если я помещу это в затем консоль браузера обновляет кнопку, значок текущей активной вкладки браузера также меняется на значок перезагрузки, чего не происходит с запросом

2) Почему инструменты разработчика Chrome видят эту перезагрузку как перенаправление с input.php (вкладка «Сеть») и помещают в ответ весь файл html index.php, который не произойдет, если я запусту $('body').html("<script>location.reload()</script>") в консоли?

Ответы [ 2 ]

2 голосов
/ 04 мая 2019

Я думаю, мы можем согласиться, что location.reload(); просто перезагружает всю страницу. Это может быть совершенно другая страница.

$("body").html(info); полностью заменяет содержимое элемента <body> ... </body> страницы, но это не вся страница. HTML-страница это больше. У него есть заголовки, <head>, скрипты и многое другое. Это все остается на месте, когда вы используете $("body").html(info);.

В документации JQuery говорится, что .html() использует свойство браузера innerHTML . Точный механизм:

  1. Указанное значение анализируется как HTML, в результате чего объект DocumentFragment представляет новый набор узлов DOM для новых элементов.
  2. Содержимое элемента заменяется узлами в новом DocumentFragment . Поскольку все узлы вставляются в документ одновременно, запускается только одна перекомпоновка и рендеринг вместо потенциально одного для каждого вставленного узла, если они были вставлены отдельно.

Страница reload() полностью перестраивает документ, включая все. Он создает дерево заметок DOM, и пока он это делает, он пытается его визуализировать. Возможно, что несколько перекомпоновок и визуализаций сработают при создании всей страницы. Например, когда загружается файл CSS или когда поступает больше исходного кода HTML. Многие страницы также имеют Javascript, который немного изменяет страницу после загрузки. Вот что вы видите, когда завершается полная перезагрузка.

0 голосов
/ 04 мая 2019

location.reload () означает перезагрузить текущую страницу, когда вы получаете ответ от сервера, Вам не нужно писать html-скрипт для перезагрузки страницы, попробуйте это 

$.ajax({
    url: $("#input_form").attr("action"),
    data: formData,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function(info){
     if(info) {
      location.reload();
   }
}
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...