Javascript 防止在将项目提交到购物车时重新加载页面。

我正在开发一个应用程序，在向购物车添加产品时，我需要防止页面重新加载

目前我正在使用GET方法将产品提交到购物车

<a href="cart/add?itemid=101&itemcat=starter></a>

正如您可能已经注意到的，我使用alert（）来测试输出，就像我只得到第一个产品的值，其余的都被忽略了考虑使用循环。请验证上述代码或建议其他解决方案

这是最新的

问题是我能够获得第一个产品而不是第二个产品的项目id

$(document).ready(function(){
$(".prod a").click(function(e){

    var id = $(".prod").find('input[id=itemid]').val();
    var cat = $(".prod").find('input[id=itemcat]').val();

    alert('ID :' + id + '\n\rCAT :' + cat);
    e.preventDefault();
    return false; // reload stopped
});
});

尝试将

e.PreventDefault（）

添加到脚本中。

    $(".prod a").click(function(event){
event.preventDefault();
        var id = $(".prod").find('input[id=itemid]').val();
        var cat = $(".prod").find('input[id=itemcat]').val();

        alert('ID :' + id + '\n\rCAT :' + cat);
        return false; // reload stopped

    });

用于停止定位标记的默认行为

你需要

改变

var id = $(".prod").find('input[id=itemid]').val();
var cat = $(".prod").find('input[id=itemcat]').val();

到

您需要最接近的

tr

元素而不是

.prod

---

$（this）.closest（'tr'）

从

DOM

中获取最近的

tr

元素

---

---

您可以使用ajax请求，因为这不是问题的答案，但您确实不应该使用GET将项目添加到购物车中。HTTP GET方法不应用于修改服务器状态的操作。在这种情况下，它应该是一个PUT，虽然一篇文章不会太糟糕。但是，好的捕获不会解决页面重新加载问题，它解决了一个单独的问题。@srajelli检查更新的答案和演示-->@srajelli很高兴它有帮助：）@Ian问题解决了，这个问题只是因为这个关键字。

var id = $(".prod").find('input[id=itemid]').val();
var cat = $(".prod").find('input[id=itemcat]').val();

var id = $(this).closest('tr').find('#itemid').val();
var cat = $(this).closest('tr').find('#itemcat').val();

$(document).ready(function () {
    $(".prod a").click(function (e) {
        e.PreventDefault(); //to stop default behavior of anchor tag
        //this refers to the current a element clicked .
        var id = $(this).closest('tr').find('#itemid').val();
        var cat = $(this).closest('tr').find('#itemcat').val();
        alert('ID :' + id + '\n\rCAT :' + cat);
        return false; // reload stopped
    });
});