Axios/ Ajax 发布数据问题

Question

我正在尝试学习 React，所以我正在用 React 重建 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 posts 信息时，它似乎与您在图片上看到的不同 - 我该如何更改我的上面的代码所以它匹配默认值 post 如果这是问题所在？

我的 axios post：

默认 M2 post：

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

Answer 1

params是在查询参数中发送数据。要在 post 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

Answer 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();
    });

Axios/ Ajax 发布数据问题

Axios/ Ajax posting data issue

javascript

ajax

reactjs

magento2

axios