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

Posted 2023-02-27

【中文标题】如何使用 javascript 正确发布 x-www-form-urlencoded 数据？ [复制]

【英文标题】：How to post a x-www-form-urlencoded data properly using javascript? [duplicate]

【发布时间】：2018-11-13 13:58:41

【问题描述】：

我已经编写了一个 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]

【问题讨论】：

试试body: formBody.join('&')

【参考方案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());

【讨论】：

一切似乎都很好，但在我返回的数据中，两个数组值是 null shopProductsCount 和 shopProducts....但其他值似乎是正确的，我的意思是 responseResult 等

@hearty - 可以肯定这将是一个不相关的问题。

【参考方案2】：

阅读此answer

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

【讨论】：

如果该问题的答案回答了这个问题（我认为你是对的，确实如此），请投票以重复关闭，不要在答案中发布指向答案的链接。