Итак, я создал приложение To-Do, которое при вводе чего-либо в поле должно создать AJAX request для сервера Express с входными данными, а затем сервер Express (POST) сделает поместите эти данные в массив (Items) и затем, наконец, EJS отобразит их (используя ForEach и получив item property каждого object внутри)
Теперь проблема в том, что всякий раз, когда я отправляю это, кажется, что оно вообще ничего не отправляет, req.body пусто и события, которые я прикрепил к XHR request, не показывают ничего, кроме 3 events :
onprogress
XMLHttpRequest { onreadystatechange: null, readyState: 2, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: "http://localhost:3000/todo", status: 0, statusText: "", responseType: "", response: "" }
ошибка
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 is {}
И, наконец, это файл Javascript, который я использую для AJAX-запроса к серверу методом POST:
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
);
Если я не был достаточно ясен, пожалуйста, скажите мне.