преодолеть ajax обновление страницы

Question

Я создаю приложение с множеством отправок форм и использую ajax для отправки данных на сервер (node js). У меня есть таблица, которую нужно обновить одним нажатием кнопки, и при нажатии мне нужно загрузить счетчик и вызвать запрос публикации ajax на сервер. На сервере требуется некоторое время для обновления и отправки результата на ajax успех. Итак, при ajax успехе я скрываю счетчик нагрузки и обновляю данные в таблице. Все работает нормально, проблема между тем, когда вызывается ajax req и на стороне сервера выполняется запрос, пользователь может перезагружать страницу, когда страница перезагружается, вызов ajax очищается, поэтому я не могу скрыть вращение загрузки и обновить данные успеха до html . Какое возможное решение, чтобы этого избежать?

$.ajax({
   url: url,
   type: 'POST',
   processData: false,
   contentType: false,
   data: formdata,
   success: function (data) {
     if (data.status == 'Success') {
       toastr.success(data.msg);
       // code to hide load spin
      // update result data to html
    }
 })

Answer 1

Вы можете избежать обновления страницы sh (перезагрузки), пока весь ваш код выполняется, изменив действие формы html -

<form id="myForm" action="javascript:void(0)"></form>

Это также будет поддерживать HTML стандарты без причудливого кода для управления функциями элементов.

Answer 2

Вы можете сделать три вещи, перечисленные ниже в порядке сложности:

1. Поместите на страницу предупреждения, чтобы пользователи не нажимали кнопки перезагрузки или возврата. Этот подход часто применяется на платежных шлюзах, когда данные кредитной карты проверяются на стороне сервера. Вы можете показать модальное диалоговое окно с предупреждением и графиком счетчика c.

2. Используйте переменные сеанса на стороне сервера, чтобы обнаруживать прерывания вызовов ajax. Например, у вас может быть переменная с именем ajax_status (значения нет, неполные и полные). Вы можете установить эту переменную при запуске и успешном завершении вызова ajax. При загрузке страницы, если вы обнаружите, что переменная установлена ​​как неполная, покажите сообщение об ошибке, в котором говорится: «Что-то пошло не так, вы нажали кнопку перезагрузки?»

3. Расширьте второй подход, чтобы сохранить параметры вызова ajax и повторно запустить запрос на перезагрузку страницы (показать предупреждение о том, что обновление данных sh было прервано, и подтвердить, что сообщение не перезагружается).