Проблема с отправкой формы 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'))

форма-сериализация (https://code.google.com/archive/p/form-serialize/)

serialize(document.forms[0]);

jQuery

$("form").serializeArray()

Answer 2

Ваш вызов ajax не отправляет данные на сервер. Используйте объект formdata или serialize () для получения входных значений формы и отправки их на сервер.

Использование

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

ИЛИ

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

Вместо

var form = $('#addProduct');

В случае успеха отправьте ответ с сервера и обновите функцию DOM в случае успеха. Не используйте window.location.href = "/";

Answer 3

Чтобы обновить ваш документ после успеха, вы можете использовать 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");
                  }
               });

            });
    });

Я обновляю свой ответ и использую отображение div с идентификатором, чтобы показать мои данные, возвращенные из успеха ajax

Answer 4

Вы меняете весь смысл вызова ajax.Ajax-вызов используется для обновления чего-либо без обновления страницы.В вашем случае успеха вы меняете URL, который не является правильным.Удалите window.location.href = "/"; из своего кода и попробуйте добавлять сообщения или предупреждать что-то вроде alert('Product is added to cart');