XMLHttpRequest POST Form Входы не обрабатываются с помощью Promises

Я пытаюсь реализовать запрос XHR POST с ES2015. Обещания на локальном сервере с этим json-server. Когда я отправляю форму с onsubmit, сервер событий не получает никаких данных, как если бы форма была пуста. Но если я выброшу ошибку (throw SyntaxError; // или console.log(undefinedVar)), перед выполнением моих данных объекта Promise объект будет отправлен на сервер, как предполагалось. Я попробовал setTimeout, чтобы ввести небольшую задержку между событием onsubmit и выполнением обещаний. Но даже это не работает. Я попробовал send(new FormData(data)); перед отправкой формы HTMLElement непосредственно в качестве данных, но также и в пустой форме.XMLHttpRequest POST Form Входы не обрабатываются с помощью Promises

Я новичок в async в JS, есть ли потребность в какой-то задержке в обещаниях? Или что я делаю неправильно?

Код, где мне нужно вставить исправление.

function submitForm(form_Data) { 

throw SyntaxError; //THE REQUIRED ERROR 

getData(form_Data.method, form_Data.action, form_Data).then((res) => { 
    console.log(res); 
}).catch((err) => { 
    console.log(err); 
});}

Полный код:

"use strict"; 
 

 

 
function getData(method, url, data) { 
 
\t return new Promise(function (resolve, reject) { 
 
\t \t let xhr = new XMLHttpRequest(); 
 
\t \t xhr.open(method, url, true); 
 
\t \t xhr.onload = function (e) { 
 
\t \t \t e.preventDefault(); 
 
\t \t \t if (this.status >= 200 && this.status < 300) { 
 
\t \t \t \t resolve(xhr.response); 
 
\t \t \t } else { 
 
\t \t \t \t reject({ 
 
\t \t \t \t \t status: this.status, 
 
\t \t \t \t \t statusText: this.statusText 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t }; 
 
\t \t xhr.onerror = function() { 
 
\t \t \t reject({ 
 
\t \t \t \t status: this.status, 
 
\t \t \t \t statusText: this.statusText 
 
\t \t \t }); 
 
\t \t }; 
 
\t \t xhr.send(data); 
 
\t }); 
 
} 
 

 

 
function submitForm(form_Data) { 
 
\t throw SyntaxError; 
 

 
\t getData(form_Data.method, form_Data.action, form_Data).then((res) => { 
 
\t \t console.log(res); 
 
\t }).catch((err) => { 
 
\t \t console.log(err); 
 
\t }); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Ajax</title> 
 
</head> 
 
<body> 
 
    <header> 
 
    <h2>Json and Ajax</h2> 
 
    <form id="formFirst" method="POST" action="http://localhost:3000/posts" onsubmit="submitForm(this); return false;"> 
 

 
     <input id="input1" name="input1" type="text"> 
 

 
     <input id="input2" name="input2" type="text"> 
 
     <input type="submit"> 
 
    </form> 
 
    </header> 
 

 
    <script src="js/main.js" charset="utf-8"></script> 
 
</body> 
 
</html>

источник

2017-01-08 Ahmad

Бросив ошибку вызывает JavaScript, чтобы прервать, так что обработчик события никогда не возвращается, а форма представляет как обычно. Это совсем не похоже на отсутствие JS.

The JS не в состоянии представить данные формы, потому что вы передаете send HTMLFormElement объект, который не поддерживается.

Вам необходимо построить FormData object.

xhr.send(new FormData(data));

источник

2017-01-08 20:34:59 Quentin

Я использовал это тоже, но FormData всегда возвращает пустой объект. – Ahmad

тот же HTMLFormElement, который я передаю теперь как данные, которые я использовал, чтобы передать разработчику FormData, но не работает. Он возвращает пустое значение – Ahmad

проверить вкладку сети инструментов разработчика браузеров - вы должны увидеть, что данные формы отправляются - не верьте 'console.log (new FormData (data))', если это то, что вы делаете, потому что вывод будет «смотреть» как пустой объект FromData –

XMLHttpRequest POST Form Входы не обрабатываются с помощью Promises

ответ

Смежные вопросы