body-parser(node.js) 无法使用获取浏览器 api 理解表单 POST

Question

使用 fetch api 作为 'application/x-www-form-urlencoded' 从浏览器向 nodejs 服务器发送表单数据时，node.js 服务器上的正文解析器未显示已发送的数据，而是显示一些无法理解的对象。

这里是html表单代码：

<body>
<form action="#" id="formToSubmit">
    <input type="text" name="name" value="xyz">
    <input type="text" name="phone" value="7777777777">
    <input type="submit" value="submit" onClick="submitForm()">
</form>

<script>
    function submitForm(){
        var form = new FormData(document.getElementById("formToSubmit"));
        fetch("http://localhost:8080/ppum", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'                 
            },
            body: form // problem is here
        })
        .then(res => res.json())
        .then(data => console.log(data));

    }
</script>

这是正文解析器的节点服务器代码：

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

这是 "req.body" 在服务器上的输出：

{"------WebKitFormBoundary5jfSRwRQ4GjgeApo\r\nContent-Disposition: form-data; name":"\"name\"\r\n\r\nxyz\r\n------WebKitFormBoundary5jfSRwRQ4GjgeApo\r\nContent-Disposition: form-data; name=\"phone\"\r\n\r\n7777777777\r\n------WebKitFormBoundary5jfSRwRQ4GjgeApo--\r\n"}

问题是如何从客户端以 'application/x-www-form-urlencoded' 形式发送数据。

为什么输出如图所示以及如何更正它。

注意：之前使用的是并且有效。如果您有一些关于如何将 FormData 转换为类似此答案的建议，我们将不胜感激

Answer 1

你有几个问题。

包括您的表单数据

new FormData("formToSubmit");

你在这里传递的参数需要是一个形式。您正在向它传递 string.

new FormData(document.getElementById("formToSubmit"));

内容类型

手动设置 Content-Type header 不会导致 fetch 以该格式对内容进行编码。

您正在传递 FormData object，因此内容将被编码为多部分请求。

您需要使用可以处理该格式的 body 解析器。有关如何执行此操作的详细信息，请参阅 this question。

提交按钮

提交按钮提交表单。

您需要防止浏览器在启动 ajax 请求后离开页面。

使用您正在使用的 1990 年代风格的事件绑定，您需要更改：

onClick="submitForm()"

至

onclick="submitForm(); return false;"

不过你应该切换到 modern method。

Answer 2

在这里，我们从 FormData 对象重建 formBody：

<body>
<form action="#" id="formToSubmit">
    <input type="text" name="name" value="xyz">
    <input type="text" name="phone" value="7777777777">
    <input type="button" value="submit" onClick="submitForm()">
</form>

<script>
    function submitForm(){
        var form = new FormData(document.getElementById("formToSubmit"));
        var formBody = [];
        for ( var key of form.keys()){
            var encodedKey = encodeURIComponent(key);
            var encodedValue = encodeURIComponent(form.get(key));
            formBody.push(encodedKey + "=" + encodedValue);
        }
        formBody = formBody.join("&");
        fetch("http://localhost:8080/ppum", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'                 
            },
            body: formBody
        })
        .then(res => res.json())
        .then(data => console.log(data));

    }
</script>

现在 body-parser 可以正确解析它了：

{"name":"xyz","phone":"7777777777"}

还按照 Quentin 的建议将提交按钮的类型从 'submit' 更改为 'button'。

注意：您也可以应用此答案

body-parser(node.js) 无法使用获取浏览器 api 理解表单 POST

body-parser(node.js) not able to understand form POST using fetch browser api

javascript

form-data

node.js

fetch-api

包括您的表单数据

内容类型

提交按钮