在opencart中添加产品后，如何测试成功并重定向网页？

Question

我正在使用以下表格将产品添加到opencart购物车中。 我遇到的问题是，添加产品后，它不会重定向到购物车，而只会显示一个页面，其中包含成功添加产品的通知。

形式如下：

<form action="purchase/?route=checkout/cart/add" id="addToCartForm" method="post">
<input type="hidden" name="product_id" value="40">
<input type="hidden" name="quantity" id="quantity_field" value="">
<input type="hidden" name="price" value=>

<input type="submit" alt="Order Now" title="order now" value="Order Now test">
</form>

和javascript代码：

<script>
$(document).ready(function() {
    $('form#addToCartForm input[type="submit"]').click(function(e) {
        e.preventDefault(); // prevent the form from submitting
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: 'purchase/index.php?route=checkout/cart/add'
            data: 'product_id=' + $('form#addToCartForm input[name="product_id"]').val() + '&quantity=' + $('form#addToCartForm input[name="quantity"]').val(),
            success: function(json) {
                window.location = 'purchase/index.php?route=checkout/cart';
                console.log('add success');
            }
        });
    });
});
</script>

单击表单后，页面将重定向到http://*****/purchase/?route=checkout/cart/add ，页面消息显示为“ {“ success”：“ Success：您已添加产品名称</ a>放入购物车</a>！“，” total“：” 4项-\\ u00a64.40“}”

因此，它确实添加了一个产品，但是对“成功”的重定向似乎没有任何作用。

javascript控制台不会通过console.log('add success');输出任何内容console.log('add success'); （或者它移到购物车添加页面的速度太快而无法看到）

谢谢你的帮助

Answer 1

首先从表单中删除action属性，它不是必需的（可能会导致调试混乱）

然后使用以下javascript

$('form#addToCartForm').submit(function(e) {
 e.preventDefault();
 $.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'purchase/index.php?route=checkout/cart/add'
    data: 'product_id=' + $('form#addToCartForm input[name="product_id"]').val() + '&quantity=' + $('form#addToCartForm input[name="quantity"]').val(),
    success: function (json) {
        window.location = 'purchase/index.php?route=checkout/cart';
        console.log('add success');
    }

});
});

在您的问题中，您所请求的ajax的一部分已被注释掉，是真的吗？还是刚发布到SO时就被注释了？

Answer 2

我不确定ID为'personalVirtualPrivateServerForm'的元素来自何处，但是单击按钮并不一定允许您执行您尝试的e.preventDefault（）。

就您的情况而言，您实际上是在说，单击按钮即可执行操作，但是您想说些类似的话：

$('form#addToCartForm').submit(function(e) {
    e.preventDefault();
    .... (rest of code here) ....
});

基本上，您要停止提交表单然后通过$ .ajax提交发送表单时，才有机会重定向表单。 那应该允许您执行成功回调。