使用 fetch() 将数据发布到 NodeJS答案

【问题标题】：POST data to NodeJS using fetch()使用 fetch() 将数据发布到 NodeJS
【发布时间】：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 来理解它）

提前感谢大家花时间帮助我:)

【问题讨论】：

标签： javascript jquery node.js fetch-api

【解决方案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 : '/'} 接受所有接收到的内容类型来解决。

【讨论】：

谢谢！你拯救了我的一天:)