首页 > 解决方案 > 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 = "/";
               }
            });
         })

标签: javascriptjqueryajax

解决方案


您可以使用

JavaScript

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

表单序列化(https://code.google.com/archive/p/form-serialize/

serialize(document.forms[0]);

jQuery

$("form").serializeArray()

推荐阅读