1

Привет всем! Пишу свою простенькую функцию для отправки данных из формы без перезагрузки страницы, но возникла проблема: после отправки данных через XMLHttpRequest страница все равно перезагружается (отправляет форму get-запросом). При этом сервер получает данные из формы, обрабатывает их и выдает соответствующий ответ.

Форма:

<form id="reg-form" onsubmit="sendForm(this.id, 'handler-url')>
<input type="text" name="data">
<button>Send</button>

Обработчик:

var sendForm = function (formId, url) {
    'use strict';
    var form = document.getElementById(formId);
    var formData = new FormData(form);
    var xhr = new XMLHttpRequest();
       // При установке этого заголовка работа функции прекращается ошибкой
       // xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

        xhr.open("POST", url, true);
        xhr.send(formData);

    if (xhr.status == 200) {
      alert("Worked!");
    } else {
      alert(xhr.status + ': ' + xhr.statusText+ 'Error');
    }
}

Сервер отвечает "OK", либо, если отправленные данные введены не правильно, отправляет json с описанием ошибок. Но я в любом случае получаю в алерте: "0: Error" и после этого форма отправляется get-oм.

Помогите пожалуйста: как сделать что бы форма не отправлялась get-ом после XHR и почему я не могу получить от сервера ответ 200, хотя он отправляет его?

0

4 ответа 4

3

1 return false; внутри обработчика submit предполагает остановку отправки формы.

var sendForm = function (formId, url) {
    'use strict';
   // ... ваш код
   return false;// добавить
}

Но так как у вас ф-ция inline, то вам нужно поставить onsubmit="return sendForm(this.id, 'handler-url');" или onsubmit="sendForm(this.id, 'handler-url'); return false;"

2 Вам надо проверять готов ли ответ (отправка запроса занимает некоторое время) хотя бы так while (xhr.readyState != 4); А лучше делать так:

xhr.onreadystatechange= function(){
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
             // ....
           };
        }
    }
2
  • при inline обработчике return false из sendForm недостаточно, нужно чтобы false вернулся из самого inline Обработчика
    – Grundy
    21 сен 2016 в 11:16
  • Да @Grundy, таки false с inline не передаётся.
    – nick_n_a
    21 сен 2016 в 11:26
3

Обработчик должен быть устроен так:

<form id="reg-form" onsubmit="sendForm(this.id, 'handler-url');event.preventDefault();"> 

Иначе сабмит идёт по встроенному сценарию после выполнения обработчика.

6
  • Спасибо, это действительно предотвращает отправку формы после выполнения обработчика. 21 сен 2016 в 10:48
  • Осталось узнать почему xhr.status всегда возвращает 0, а не реальный код ответа сервера. 21 сен 2016 в 10:50
  • @Роман Арсеньев а это - потому что ajax обрабатывается асинхронно. Синхронная обрабока кажется была возможна, но принято асинхронно такое делать. См. onreadystatechange - developer.mozilla.org/ru/docs/XMLHttpRequest . 21 сен 2016 в 10:55
  • @Роман Арсеньев а, понял, всё очень просто - третий параметр .open должен быть false. false - для синхронной, true - для асинхронной. 21 сен 2016 в 10:58
  • 1
    @ГончаровАлександр, синхронная в некоторых браузерах может быть помечена как deprecated или удалена
    – Grundy
    21 сен 2016 в 11:15
2

Потому что идет стандартная обработка события submit

Для предотвращения ее нужно либо вернуть false в inline обработчике

<form id="reg-form" onsubmit="return sendForm(this.id, 'handler-url')>
var sendForm = function (formId, url) {
    'use strict';
    ...
    return false;
}

Либо вызвать preventDefault

<form id="reg-form" onsubmit="sendForm(event, this.id, 'handler-url')>
var sendForm = function (e, formId, url) {
    'use strict';
    e.preventDefault();
    ...
    return false;
}

Либо использовать addEventListener вместо inline обработчика

<form id="reg-form">
document.getElementById('reg-form').addEventListener('click',function(){
    sendForm(this.id, 'handler-url');
    return false;
})
function sendForm(formId, url) {
    'use strict';
    ...
    return false;
}

или так

<form id="reg-form">
document.getElementById('reg-form').addEventListener('click',function(e){
    e.preventDefault();
    sendForm(this.id, 'handler-url');
})
function sendForm(formId, url) {
    'use strict';
    ...
}
1

Всем спасибо за участие, исходя из ваших ответов я "собрал" более оптимальный (все таки асинхронность более оптимальна) и более универсальный (inline-обработчик) способ отправки формы. Сам обработчик конечно еще не универсален, например, в него надо добавить поддержку IE, но первоначальная задача решена:

Форма:

<form id="reg-form" onsubmit="sendForm(this.id, 'handler-url'); event.preventDefault();> 
<input type="text" name="data">
<button>Send</button>

Обработчик:

var sendForm = function (formId, url) {
    'use strict';
    var form = document.getElementById(formId);
    var formData = new FormData(form);
    var xhr = new XMLHttpRequest();

    xhr.open("POST", url, true);
    xhr.send(formData);

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                alert("Worked!");
            } else {
                alert(xhr.status + ': ' + xhr.statusText + 'Error');
            }
        }
    };
}
2
  • @Igor какой нафиг глобальный event, возмущённый вы знаток)) 21 сен 2016 в 13:41
  • @ГончаровАлександр - точно, спасибо
    – user176262
    21 сен 2016 в 13:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.