Question

我是Ajax的新手，所以这是我第一次尝试将laravel和Ajax绑定在一起。无论如何，我已经了解了所有内容以及所有内容，但是当我尝试使用Submit按钮发布数据时，数据将作为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

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

<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属性分配给主题标签值。

<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脚本无法捕获提交功能的原因。

提交按钮在ajax函数之前触发获取提交

3 个答案: