Axios/ Ajax 发布数据问题答案

【问题标题】：Axios/ Ajax posting data issueAxios/ Ajax 发布数据问题
【发布时间】：2020-04-03 09:54:16
【问题描述】：

我正在尝试学习反应，所以我正在重建反应中的 magento2 minicart，除了数量变化时我在提交表单数据时遇到问题之外，一切似乎都运行良好 - 我正在尝试这样做像这样：

onChange = (e) => {
    this.setState({ qty: e.target.value }, () => {
        axios({
            headers: {
                'Content-Type': 'application/json'
            },
            method: 'post',
            url: '/checkout/sidebar/updateItemQty/',
            data: {
                item_id: 13,
                item_qty: this.state.qty,
                form_key: 'KTC30XGNGahjfVmn'
            }
        });
    });
}

在刷新页面时，购物篮数量不会更新，当检查默认 mangento2 如何发布信息时，它似乎与您在图像上看到的不同 - 我如何更改上面的代码以使其与默认值匹配发帖，如果这是问题？

我的 axios 帖子：

默认 M2 帖子：

更新：将参数更改为数据会导致请求 302 并将类型更改为 HTML，并且似乎无法将其恢复为 json

【问题讨论】：

标签： javascript ajax reactjs axios magento2

【解决方案1】：

params是在查询参数中发送数据。要在邮件body 中发送数据，请使用body 选项。像这样：

编辑

由于您是提交表单数据，您需要指定内容类型为application/x-www-form-urlencoded，并且还需要更改我们发送数据的方式。

         axios({
                method: 'post',
                url: '/checkout/sidebar/updateItemQty/',
                headers: {
                     'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: queryString.stringify({
                    item_id: 9,
                    item_qty: this.state.qty,
                    form_key: 'KTC30XGNGahjfVmn'
                })
            });
         });

您可以从这里使用https://github.com/Gozala/querystring#readme获取查询字符串模块

【讨论】：

感谢您的回复！我之前确实尝试过，并认为这是错误的，因为状态更改为 302，类型更改为 html，我猜这与标题有关？我已将此添加到问题中的代码中
302 是重定向的状态码。看起来服务器正在将您重定向到其他页面，这就是您收到 html 响应的原因。不管怎样，看着第二张图片，我意识到它是以 url 编码的形式发送数据。我为此更改了代码。请让我知道它有效。

【解决方案2】：

这可能是 M2 特定的解决方案，但它需要构建为如下形式的表单，以便将其作为表单数据提交：

let addToCartForm = new FormData();
    addToCartForm.set('item_id', this.props.item_id);
    addToCartForm.set('item_qty', this.state.qty);
    addToCartForm.set('form_key', document.getElementsByName('form_key')[0].value);

    axios({
        url: '/checkout/sidebar/updateItemQty/',
        method: 'post',
        data: addToCartForm
    }).then(() => {
         window.updateCartData();
    });

【讨论】：