Javascript AJAX表单提交问题

要求通过ajax调用提交表单，您将截获结果并更新页面。你永远不会离开索引页

我无法让ajax调用正常工作

        <form action="/cart" method="post" id="addProduct">
            Quantity: <input type="number" name="quantity">
            <button type="submit">Add to Cart</button>
            <input type="hidden" name="productid" value="{{id}}">
            <input type="hidden" name="update" value="0">
        </form>





         var form = $('#addProduct');
            form.submit(function(e){
               e.preventDefault();
                 $.ajax({
                     type: "POST",
                     url: "/cart",
                     data: form,
                     dataType: "json",
                 success: function(e) {
                     window.location.href = "/";
               }
            });
         })

数量：
添加到购物车
变量形式=$（“#添加产品”）；
表格提交（功能（e）{
e、 预防默认值（）；
$.ajax({
类型：“POST”，
url:“/cart”，
数据：表格，
数据类型：“json”，
成功：职能（e）{
window.location.href=“/”；
}
});
})

您可以使用

JavaScript

new FormData(document.querySelector('form'))

表单序列化（）

jQuery

$("form").serializeArray()

---

您正在更改ajax调用的全部含义。Ajax调用用于在不刷新页面的情况下更新某些内容。在你成功的例子中，你改变了不正确的URL。删除

window.location.href=“/”并尝试附加消息或类似于
警报（“产品已添加到购物车”）的警报
要在成功后更新文档，可以使用append（e）更新DOM

<form  method="post" id="addProduct">
            Quantity: <input type="number" name="quantity">
            <button type="submit">Add to Cart</button>
            <input type="hidden" name="productid" value="2">
            <input type="hidden" name="update" value="0">
        </form>

    <div id="display">

    </div>



    $(function(){

            $("#addProduct").submit(function(e){
                e.preventDefault();
           var quantity = $(this).children("input[name=quantity]").val();
           var productid = $(this).children("input[name=productid]").val();
           var update = $(this).children("input[name=update]").val();
               $.ajax({
                  type:"post",
                  url:"/cart.php",
                  data:{update:update,quantity:quantity,productid:productid},
                  success: function(feedback){
                      $("#display").html(feedback);
                  },
                  error: function(err){
                    alert("error");
                  }
               });

            });
    });


数量：
添加到购物车
$（函数（）{
$（“#添加产品”）。提交（功能（e）{
e、 预防默认值（）；
var数量=$（this）.children（“输入[名称=数量]”）.val（）；
var productid=$（this.children）（“输入[name=productid]”）.val（）；
var update=$（this.children）（“输入[name=update]”）.val（）；
$.ajax({
类型：“post”，
url:“/cart.php”，
数据：{update:update，quantity:quantity，productid:productid}，
成功：功能（反馈）{
$（“#显示”）.html（反馈）；
},
错误：函数（err）{
警报（“错误”）；
}
});
});
});

我更新我的答案，并使用带有id的div显示从ajax成功返回的数据
您的ajax调用没有向服务器发送数据。使用formdata对象或serialize（）获取表单输入值，然后将其发送到服务器

使用

或

而不是

var form = $('#addProduct');

成功后，从服务器发送响应并在success函数中更新您的DOM。不要使用window.location.href=“/”
 你的具体问题是什么？尝试将
error:function（）{…}
添加到
ajax
选项以检查是否存在任何错误，请使用其中的日志。此外，您可能需要
数据：form.serialize（）
。您希望如何处理ajax调用响应？现在，您只需使用以下行离开页面：window.location.href=“/”；你应该用代码替换这一行来更新页面，或者用ajax响应做一些其他事情。更新内容的代码应该在你的ajax调用中提供的URL中，如果是cart页面。我可以举个例子吗？？？@xerox，通常我们使用ajax来执行任务，而不需要加载页面，或者当我们必须更新一些DOM元素或值时。我们不需要重新加载整个页面。在您的情况下，您必须在JSON对象中发送更新的值，并且您可以在成功时更新表单值。
var form = new FormData($('#addProduct')[0]); 

var form =  $("'#addProduct").serialize(); 

var form = $('#addProduct');