Question

我尝试使用此json-server在localserver上使用ES2015 Promises实现XHR POST请求。当我使用onsubmit事件服务器提交表单时，不会收到任何数据，就好像表格是空的一样。但是如果我在执行Promise之前抛出一个错误（throw SyntaxError; //或console.log(undefinedVar)}，那么数据会按预期发布到服务器。我尝试setTimeout在onsubmit事件和Promise执行之间引入了一点延迟。但即使这样也无法运作。我在直接发送HTMLElement Form作为数据之前尝试了send(new FormData(data));，但也发布了空表格。

我在JS中新异步是否需要在Promises中出现某种延迟？或者我做错了什么？

我需要插入错误的代码。

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);
});}

完整代码：

＆＃13;

"use strict";


function getData(method, url, data) {
	return new Promise(function (resolve, reject) {
		let xhr = new XMLHttpRequest();
		xhr.open(method, url, true);
		xhr.onload = function (e) {
			e.preventDefault();
			if (this.status >= 200 && this.status < 300) {
				resolve(xhr.response);
			} else {
				reject({
					status: this.status,
					statusText: this.statusText
				});
			}
		};
		xhr.onerror = function () {
			reject({
				status: this.status,
				statusText: this.statusText
			});
		};
		xhr.send(data);
	});
}


function submitForm(form_Data) {
	throw SyntaxError;

	getData(form_Data.method, form_Data.action, form_Data).then((res) => {
		console.log(res);
	}).catch((err) => {
		console.log(err);
	});
}

＆＃13;

<!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>

＆＃13;

Answer 1

抛出错误会导致JavaScript中止，因此事件处理程序永远不会返回，并且表单正常提交。这就像没有任何JS一样。

JS无法提交表单数据，因为您正在传递send HTMLFormElement对象，但该文档并不受支持。

您需要构建FormData object。

xhr.send(new FormData(data));

XMLHttpRequest POST表单未使用Promises解析的输入

1 个答案: