表单 post 但不重新加载页面

Question

我陷入了前所未有的困境。

我的情况：我正在做一个购物车。当用户单击 "Add" 按钮时，它会发布表单并在服务器端，即在 if(IsPost){....} 内，相应的项目将添加到我数据库中的购物车 table 中。

一切都很好，除了它重新加载页面并滚动回顶部。通过一些研究，我知道 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>

在我添加到 cart.cshtml 时，我在 UI 上没有任何内容。它只是处理 data.I 不希望该页面加载。它看起来像这样：

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

表单 post 但不重新加载页面

Form post but do not reload the page

ajax

forms

razor

webmatrix