【发布时间】：2018-08-30 00:07:23
【问题描述】：
所以我创建了一个To-Do 应用程序，当您在该字段中输入内容时，它应该使用输入数据向Express 服务器创建一个AJAX request，然后Express 服务器(POST) 执行将该数据推送到一个数组中（Items），然后最后EJS 呈现它（通过使用ForEach 并获取每个object 内部的item property）
现在的问题是，每当我提交它时，它似乎根本没有发送任何东西，req.body 是空的，我附加到 XHR request 的事件除了 3 events 之外什么都不显示：
进行中
XMLHttpRequest { onreadystatechange: null, readyState: 2, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: "http://localhost:3000/todo", status: 0, statusText: "", responseType: "", response: "" }
onerror
XMLHttpRequest { onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: "http://localhost:3000/todo", status: 0, statusText: "", responseType: "", response: "" }
onloadend
XMLHttpRequest { onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: "http://localhost:3000/todo", status: 0, statusText: "", responseType: "", response: "" }
如您所见，readyState 是 4，但 statusText, status, responseType, response 不显示任何内容。状态为 0，其他为空。怎么了？我尝试使用Fetch API，但它没有用......或者，我不明白问题出在哪里，虽然我确定问题出在AJAX 请求中，但我无法弄清楚。
这是HTML 文件（通过使用EJS 作为视图引擎）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>To-do Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="../Public/Assets/Styles.css" />
<script src="../Public/Scripts/Add.js" defer></script>
</head>
<body>
<div id="todo-table">
<form>
<input type="text" name="item" placeholder="Write an item here" required>
<button id="Add">Add</button>
</form>
<ul>
<% data.forEach(function(element){ %>
<li> <%= element.item %> </li>
<% }) %>
</ul>
</div>
</body>
</html>
这是整个服务器设置（Express）：
let express = require("express");
let toDocontroller = require("./Controllers/toDoController");
let bodyparser = require("body-parser");
let urlencoded = bodyparser.urlencoded({ extended: false });
//set up express
let app = express();
// set up view engine
app.set("view engine", "ejs");
// use Public folder
app.use("/Public", express.static("Public"));
app.use(bodyparser.json());
// listen for a port
app.listen(3000);
// Running Controller
toDocontroller(app, urlencoded);
这是 POST/Delete/GET 请求的服务器设置（重要的）：
let items = [];
module.exports = function(app, urlencoded) {
app.get("/todo", function(req, res) {
res.render("toDo", { data: items });
});
app.post("/todo", urlencoded, function(req, res) {
items.push(req.body);
console.log(req.body);
});
app.delete("/todo:item", function(req, res) {});
};
Req.body 是 {}
最后，这是我使用它通过 POST 方法向服务器发出 AJAX 请求的 Javascript 文件：
let form = document.querySelector("form");
let valueToAdd = document.querySelector("input").value;
let readyValue = { item: valueToAdd };
let request = new XMLHttpRequest();
request.open("POST", "/todo", true);
request.send(readyValue);
form.addEventListener(
"submit",
function() {
request.onabort = function() {
console.log("onabort ", request);
};
request.onerror = function() {
console.log("onerror ", request);
};
request.onload = function() {
console.log("onload ", request);
};
request.onloadend = function() {
console.log("onloadend ", request);
};
request.onloadstart = function() {
console.log("onloadstart ", request);
};
request.onprogress = function() {
console.log("onprogress ", request);
};
request.ontimeout = function() {
console.log("ontimeout ", request);
};
},
true
);
如果我不够清楚，请告诉我。
【问题讨论】：
-
尝试使用
JSON.stringify( readyValue )对readyValue 进行字符串化，以便发布一个JSON 字符串而不是一个javascript 对象。 -
@Shilly 是的，我以前做过。它不起作用并显示相同的结果。
-
什么函数触发了这个AJAX请求？如果您在表单中使用提交按钮，您可能需要阻止默认行为，以便函数在页面刷新之前运行。那么您能否提供更多关于 AJAX 调用是如何触发的上下文？
-
@Shilly 这不是提交按钮。这是一个普通按钮，因此无需阻止默认行为。表单上也没有“方法：发布，操作”，所以我认为它不会刷新（尽管页面在浏览器中旋转）我猜是在提交时触发了 AJAX 调用（事件侦听器）
-
你能添加那个事件监听器的代码吗？我假设显示的客户端 JS 代码位于函数内部，因为您的 form.onsubmit 不包含 request.send() 部分。或者这就是所有的客户端代码？在这种情况下，您在加载时提交表单，而不是通过单击按钮，这可以解释为什么没有发送值。
标签： javascript node.js ajax express xmlhttprequest