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

gather

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

 df %>%
    gather(key = "variable", value = "value", -id, -category) %>%
    group_by(category, variable) %>%
   summarise(mean = mean(value))
# A tibble: 4 x 3
# Groups:   category [2]
#  category variable     mean
#  <fct>    <chr>       <dbl>
#1 bad      X1        0.228  
#2 bad      X2       -0.438  
#3 good     X1       -0.00465
#4 good     X2        0.355

jQuery

set.seed(24)
df = data.frame(matrix(rnorm(10), nrow=5)) 
category <- rep(c("good", "bad"), c(2, 3))
id <- c(1, 2, 3, 4, 5)
df <- cbind(id, df, category)

Answer 2

您的Ajax调用未将数据发送到服务器。使用formdata对象或serialize（）获取表单输入值，然后将其发送到服务器。

使用

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

OR

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

代替

var form = $('#addProduct');

成功后，从服务器发送响应并更新成功功能中的DOM。不要使用window.location.href =“ /”;

Answer 3

您正在更改ajax调用的全部含义。 Ajax调用用于更新某些内容而无需刷新页面。对于成功的案例，您正在更改不正确的URL。从您的代码中删除window.location.href = "/";，然后尝试添加消息或提醒类似alert('Product is added to cart');

的消息

Answer 4

要在成功后更新文档，可以使用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");
                  }
               });

            });
    });

我更新答案，并使用带有id显示的div来显示我从ajax成功返回的数据

AJAX表单提交问题

4 个答案: