使用 fetch() 将数据发布到 NodeJS
Posted
技术标签:
【中文标题】使用 fetch() 将数据发布到 NodeJS【英文标题】：POST data to NodeJS using fetch() 【发布时间】：2018-11-24 07:21:44 【问题描述】：我一直在努力学习 NodeJS this NodeJs Youtube Tutorial.
我已经使用Fetch API 工作了几个月，从 WordPress 和 Google 表格后端获取数据。
Youtube 播放列表的最后一个视频是关于使用 NodeJS 和 npm 的 express、EJS 和 body-parser 创建一个待办事项列表应用程序。
然而，at part 4 of the To do list app，这位“老师”正在使用带有 Ajax 的 jQuery 将数据发布到 NodeJS (His jQuery Code Snippet)。由于我只使用 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))
);
我的控制器处理所有 get/post 请求，称为 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 代码 sn-p 来使其工作，但我急切地尝试使用纯 Javascript 来理解它）
提前感谢大家花时间帮助我:)
【问题讨论】：
【参考方案1】：您需要使用 bodyParser.json 而不是 bodyParser.urlencoded。
顾名思义，urlencoded 将解析 url 参数，而 bodyParser.json 将解析请求正文中的 json。
【讨论】：
你我的朋友刚刚赢得了虚拟啤酒！谢谢！【参考方案2】：我遇到了同样的问题，但我的 express 版本是 > 4.5，所以我使用了：
const express = require('express');
app = express()
app.use(express.json(
type: "*/*"
))而不是：
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json())问题已通过使用参数 type : '/' 接受所有接收到的内容类型来解决。
【讨论】：
谢谢！你拯救了我的一天:)以上是关于使用 fetch() 将数据发布到 NodeJS的主要内容，如果未能解决你的问题，请参考以下文章
使用 Multer 将带有 fetch 的图像上传到 Express
如何使用节点、createPresignedPost 和 fetch 将图像文件直接从客户端上传到 AWS S3
使用 fetch 进行 POST 请求以将数据添加到 JSON 服务器数据库
Javascript Fetch API - 如何将输出作为对象保存到变量（不是承诺）
如何使用 fetch 将 FormData 从 javascript 发送到 ASP.NET Core 2.1 Web API