包括表单数据

Question

使用fetch api发送表单数据作为＆＃39; application / x-www-form-urlencoded＆＃39;从浏览器到nodejs服务器，node.js服务器上的body-parser没有显示发送的数据，但有些对象是不可理解的。

这是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 }));

这是＆＃34; req.body＆＃34;的输出。在服务器上：

{"------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"}

问题是如何将数据发送为＆＃39; application / x-www-form-urlencoded＆＃39;从客户端。

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

注意：以前使用stackoverflow.com/a/37562814/3690154并且它有效。如果你有一些关于如何将FormData转换为类似回答的建议，那么将非常感激

Answer 1

你有几个问题。

包括表单数据

new FormData("formToSubmit");

您在此处传递的参数需要表单。您传递的是字符串。

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

内容类型

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

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

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

提交按钮

提交按钮提交表单。

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

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

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"}

还改变了提交按钮的类型，从提交＆＃39;到了按钮＆＃39;根据昆汀的建议。

注意：您也可以应用此答案 https://stackoverflow.com/a/37562814/3690154

body-parser（node.js）无法使用fetch浏览器api理解表单POST

2 个答案:

包括表单数据

内容类型

提交按钮