如何使用 javascript 正确发布 x-www-form-urlencoded 数据？ [复制]

Question

我已经编写了一个 JS 函数来发布 categoryId 和 shopId 以及 page:0 到一个 api，这是我的函数：-

 getInsideMenu(categoryid,shopid){
        var formBody = [];
        var details={
             'categoryId':categoryid,
             'shopId':shopid ,
             'page':'0'
        };
        for (var property in details) {
              var encodedKey = encodeURIComponent(property);
              var encodedValue = encodeURIComponent(details[property]);
              formBody.push(encodedKey + "=" + encodedValue);
        }
                return fetch(
            `${serverAddress}/api/shopProducts`,
            {
                method: 'POST',
                body: formBody,
                headers: {
                   'Content-Type': 'application/x-www-form-urlencoded'
                }
            }
        ).then((res)=>(res.json()))
    },

但我得到了 null 。我想这个函数没有正确定义。可以做些什么来解决它。它在邮递员中运行良好。 [！[这是邮递员我如何发送][1]][1]

Answer 1

您正在构建一个编码名称/值对的数组，并将其作为 POST 的 body 直接传递。但fetch 不接受该参数中的数组。

对代码的最小更改是使用 & 作为分隔符加入数组：

return fetch(
    `${serverAddress}/api/shopProducts`,
    {
        method: 'POST',
        body: formBody.join("&"), // <===== here
        headers: {
           'Content-Type': 'application/x-www-form-urlencoded'
        }
    }
). /* etc */

或者，使用FormData，因为这正是它的用途：:-)

getInsideMenu(categoryid,shopid){
    var formBody = new FormData();
    formBody.set("categoryId", categoryid);
    formBody.set("shopId", shopid);
    formBody.set("page", "0");
    return fetch(
        `${serverAddress}/api/shopProducts`,
        {
            method: 'POST',
            body: formBody,
            headers: {
               'Content-Type': 'application/x-www-form-urlencoded'
            }
        }
    ).then((res)=>(res.json()));
}

（根据您的需要，您可以使用set 或append。以上使用set。）

---

旁注1：

这一行：

).then((res)=>(res.json()));

...不需要大部分()：

).then(res => res.json());

旁注2：

别忘了检查是否成功；不这样做是使用fetch 时的常见陷阱。 fetch 不拒绝 HTTP 错误（如 404 或 500）。如果你想拒绝 HTTP 错误，你必须自己做：

return fetch(/*...*/)
    .then(res => {
        if (!res.ok) {
            throw new Error(res.status);
        }
        return res;
    })
    .then(res => res.json());

Answer 2

阅读此answer

您必须在循环后至少插入formBody = formBody.join("&");。