提交AJAX表格的问题

Question

要求通过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 = "/";
               }
            });
         })

Answer 1

您可以使用

javascript

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

form-serialize(https://code.google.com/archive/p/form-serialize/(

serialize(document.forms[0]);

jQuery

$("form").serializeArray()

Answer 2

您正在更改Ajax调用的全部含义。AJAX调用用于更新没有页面刷新的内容。就成功而言，您正在更改不正确的URL。从您的代码中删除window.location.href = "/";，然后尝试附加消息或提醒诸如alert('Product is added to cart');

Answer 3

您的ajax调用不是向服务器发送数据。使用FormData对象或序列化((获取表单输入值，然后将其发送到服务器。

使用

var form = new FormData($('#addProduct')[0]); 

或

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

而不是

var form = $('#addProduct');

和成功后，从服务器发送响应并在成功函数中更新DOM。不要使用window.location.href ="/";

Answer 4

成功后更新您的文档，您可以使用附录(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");
                  }
               });
            });
    });

我更新答案，然后使用div带有ID显示的DIV显示我的数据返回从Ajax Success