POST-данные в NodeJS с использованием fetch ()
Я пытался изучить NodeJS, следуя это руководство по NodeJs на Youtube.
Я уже работал с Получить API пару месяцев, чтобы получить данные из бэкэндов WordPress и Google Sheets.
Последние видеоролики плейлистов Youtube посвящены созданию приложения To Do List с помощью NodeJS и npm express, EJS и body-parser.
Однако, в части 4 приложения "Список дел", этот «учитель» использует jQuery с Ajax для передачи данных POST на NodeJS (Его фрагмент кода jQuery). Поскольку я работал с fetch () только для запросов AJAX POST, я хотел продолжить использование этого метода на простом JavaScript.
Мой файл ejs с именем todo.ejs, в котором хранится HTML-шаблон страницы, выглядит так:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "/assets/style.css">
<!-- Works because of express middleware.
Since we stored the public folder as a static folder,
we can request anything within that folder from the url, such as
127.0.0.1:3000/assets/styles.css
-->
<title>Todo List</title>
</head>
<body>
<h1>My Todo List</h1>
<div id = "todo-table">
<form>
<input type = "text" name = "item" placeholder = "Add new item..." required>
<button type = "submit">Add Item</button>
</form>
<ul>
<% todos.forEach(todoList =>{ %>
<li> <%= todoList.item %> </li>
<% }) %>
</ul>
</div>
</body>
<script src = "/assets/script.js"></script>
</html>
Мой script.js (связанный со страницей todo.ejs) выглядит так:
document.addEventListener("DOMContentLoaded", function (event) {
let submitButton = document.querySelector("button");
let textField = document.querySelector("input");
submitButton.addEventListener("click", addItem);
function addItem() {
let newItem = textField.value;
let todo = {
item: newItem
};
fetch("/todo", {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(todo)
}).then((res) => res.json())
.then((data) => console.info(data))
.catch((err) => console.info(err))
}
});
И мой контроллер, обрабатывающий все запросы на получение / публикацию, называется todoController.js, выглядит так:
let bodyParser = require("body-parser");
let urlencodedParser = bodyParser.urlencoded({ extended: false });
// Have some items already in place
let data = [{item: "Get milk"} , {item: "Walk dog"} , {item: "Clean kitchen"}];
module.exports = function (app) {
//Handle get data requests
app.get("/todo", function (req, res) {
res.render("todo", {todos: data});
});
//Handle post data requests (add data)
app.post("/todo", urlencodedParser, function (req, res) {
console.info(req.body);
});
//Handle delete data requests
app.delete("/todo", function (req, res) {
});
};
Теперь, каждый раз, когда я заполняю поле ввода некоторым текстом и нажимаю кнопку ввода, мой терминал выводит пустые объекты:
Основываясь на этих пустых объектах, должно быть что-то не так, что мои запросы POST не принимаются / отправляются правильно.
Мое файловое дерево выглядит так:
Кто-нибудь, у кого есть (вероятно, очевидный) ответ на этот вопрос? (Я знаю, что могу просто взять его фрагмент кода jQuery Ajax, чтобы заставить его работать, но я с нетерпением пытаюсь понять его, используя простой Javascript)
Заранее спасибо всем, кто нашел время мне помочь :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно использовать bodyParser.json вместо bodyParser.urlencoded.
Как следует из названий, urlencoded будет анализировать параметры URL, а bodyParser.json будет анализировать json в теле запроса.
Вы, мой друг, только что заработали виртуальное пиво! Спасибо!