Submit按钮在ajax函数之前触发get submit

Question

我对Ajax非常陌生，所以这是我第一次尝试将laravel和Ajax绑定在一起。无论如何，我已经理解了它的所有内容，但是当我尝试使用提交按钮发布数据时，数据是作为get方法传递的，就好像代码永远不会到达ajax函数一样。

这是我的表格：

<form id="addtocart">
                <button class="btn btn-outline-primary btn-lg" type="submit">add to cart</button>
            <input id="name" type="hidden" value="{{$one->name}}" name="data">
            <input id="price" type="hidden" value="{{$one->price}}" name="price">
            <input id="image" type="hidden" value="{{$one->image_path}}" name="image">
</form>

我的Ajax函数：

jQuery(document).ready(function(){
  jQuery('#addtocart').submit(function(e){
     e.preventDefault();
     $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        }
    });
     jQuery.ajax({
        url: "{{ url('/addtocart') }}",
        method: 'post',
        data: {
           name: jQuery('#name').val(),
           image: jQuery('#image').val(),
           price: jQuery('#price').val()
        },
        success: function(result){
           jQuery('.alert').show();
           jQuery('.alert').html(result.success);
        }});
     });
  });

感谢您的帮助！(我以为脚本一开始没有运行，因为我在ajax函数后面包含了jquery库。但事实并非如此)

Answer 1

在form标记内插入method="post"

<form id="addtocart" method="post">
                <button class="btn btn-outline-primary btn-lg" type="submit">add to cart</button>
            <input id="name" type="hidden" value="{{$one->name}}" name="data">
            <input id="price" type="hidden" value="{{$one->price}}" name="price">
            <input id="image" type="hidden" value="{{$one->image_path}}" name="image">
</form>

希望是工作

Answer 2

你为什么不在你的按钮上添加一个id

<button id="addtocart" class="btn btn-outline-primary btn-lg" type="submit">add to cart</button>

然后将事件侦听器分配给单击按钮：

jQuery('#addtocart').on('click', function(e){}); // the closure body should be the same.

Answer 3

在表单标记中，将action属性分配给一个hashtag值。

<form id="addtocart" action="#">
                <button class="btn btn-outline-primary btn-lg" type="submit">add to cart</button>
            <input id="name" type="hidden" value="{{$one->name}}" name="data">
            <input id="price" type="hidden" value="{{$one->price}}" name="price">
            <input id="image" type="hidden" value="{{$one->image_path}}" name="image">
</form>

如果没有它，表单传统上将首先执行，这就是ajax脚本无法捕获提交函数的原因。