javascript - 如何发送查询请求而不刷新？

Question

我正在 Wordpress 中使用 Woocommerce 插件。当您单击“添加到购物车”按钮时，它所做的就是将其添加到 url 的末尾？add-to-cart=4689，就像这样“http://example.com/?add-to-cart=4689”，因此无论 url 查询中的商品 id 是什么，都会添加到购物车。

但是，我不想每次都刷新页面，所以现在我正在使用 In order to add the item to cart，但不刷新页面。

有没有办法在不使用 iframe 的情况下将该页面加载请求发送到 url“http://example.com/?add-to-cart=4689”？

Answer 1

这只能使用 JavaScript 来完成。

以下内容应该适用于普通 JavaScript。

<script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://example.com/?add-to-cart=4689');
    xhr.onload = function() {
        if (xhr.status === 200) {
            //add code to render what needs to be rendered
        }
        else {
            alert('Request failed.  Returned status of ' + xhr.status);
        }
    };
    xhr.send();
</script>

该项目将像这样添加，但我认为您在刷新页面或重新呈现组件之前不会在购物篮中看到它。