Question

我被困在这里，就像我以前从未如此。

我的情况：我正在制作购物车。当用户点击＆＃34;添加＆＃34;按钮，它发布表单和服务器端，即if（IsPost）{....}内，相应的项目被添加到我的数据库中的购物车表。

一切都很好，除了它重新加载页面并滚动回顶部。通过一些研究，我知道Ajax可能会有所帮助。然后我创建了一个新的.cshtml页面add-to-cart.cshtnl。现在我的当前页面没有重新加载但它打开add-to-cart.cshtml，这不是我想要的。现在我甚至尝试学习AJAX并尝试着看实例。什么都没有帮助。请帮忙！

以下是我的代码：P.S我在webmatrix中使用razor。

<form method="post" id="productForm" action="~/add-to-cart.cshtml">
<input ............"Input Something.............../>
<button type="submit" id="add-button" >ADD</button>
</form>

在我的add-to-cart.cshtml中，我在UI上没有任何内容。它只是处理数据。我不希望该页面加载。它看起来像这样：

ifIsPost(){ 
............ADD item to the cart table of database..............
}

现在我确信，AJAX是我的解决方案，但是如何???? 请不要给我不完整的答案。我已经浪费了3天时间：/

Answer 1

试试这个

$('#productForm').submit(function(e) {
    e.preventDefault();

    $.ajax({
       type: 'POST',
       url: $(this).attr('action'),
       data : $(this).serialize(),
       success : function(response) {
           //write your code here
       },
       error : fucntion(response) {
           //write your code here
       }
   });
});

将此脚本放入<script>标记。

注意：不要忘记在页面中包含jquery。

Answer 2

以下是完整的解决方案：

$(function () {
            $('#productForm').submit(function (ev) {
                var frm = $(this);    
                $.ajax({
                    type: frm.attr('method'),
                    url: frm.attr('action'),
                    data: frm.serialize(),
                    success: function (data) {
                        //Do What Ever You Wanna Do
                    }
                });
                ev.preventDefault();
            });
        });

表格发布但不重新加载页面

2 个答案: