我一直在尝试根据此NodeJs Youtube教程学习NodeJS。
我已经与Fetch API一起工作了几个月,以从WordPress和Google Sheets后端获取数据。
Youtube播放列表的最后一段视频是关于使用NodeJS和npm的express,EJS和body-parser创建待办事项应用程序的。
但是,在“待办事项列表”应用程序的第4部分中,该“老师”正在使用带有Ajax的jQuery将数据发布到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.log(data))
.catch((err) => console.log(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.log(req.body);
});
//Handle delete data requests
app.delete("/todo", function (req, res) {
});
};
现在,每次我用一些文本填充输入字段并按下回车按钮时,我的终端就会输出空对象:
基于这些空对象,一定有问题,我的POST请求未正确接受/发送。
是否有人对此有答案(可能是显而易见的答案)?(我知道我可以抓住他的jQuery Ajax代码片段来使它起作用,但是我很想尝试使用纯Javascript来理解它)
在此先感谢大家抽出宝贵时间来帮助我:)
您需要使用bodyParser.json而不是bodyParser.urlencoded。
顾名思义,urlencoded将解析url参数,而bodyParser.json将解析请求正文中的json。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句