Laravel刀片表单中的Ajax帖子未提交答案

【问题标题】：Ajax post in Laravel blade form not submittingLaravel刀片表单中的Ajax帖子未提交
【发布时间】：2020-09-26 17:09:43
【问题描述】：

我正在尝试使用 js 和 ajax post 向我的 laravel 刀片中的表单添加一些额外的数据，但我无法让表单提交。我已经剥离了所有其他内容以试图找出问题所在，但我很困惑。任何人都可以帮忙吗？我的刀片是这样的；

@extends('layouts.app')

@section('content')
 <div class="container">
  <div class="row justify-content-center">
   <div class="col-12 col-md-6 mt-5 mb-2">

    <div class="card">
     <div class="card-body">
      <form id="payment-form">

       <button id="card-button" class="btn btn-lg btn-block btn-success">
        <span id="button-text"><i class="fas fa-credit-card mr-1"></i>{{ __('Add Payment Method') }}</span>
       </button>

      </form>
     </div>
    </div>

   </div>
  </div>
 </div>
@endsection

@section('javascript')

<script>

 const cardButton = document.getElementById('card-button');

 var form = document.getElementById('payment-form');

 cardButton.addEventListener('click', function(event) {
  // event.preventDefault();
  console.log('On click check');

  var payment = '1234';
  $.ajax({
   type: "POST",
   url: "/payment-post",
   data: {
    payment: payment,
    '_token': $('meta[name="csrf-token"]').attr('content'),
   },

  });
 });

</script>
@endsection

【问题讨论】：

只是好奇——有什么理由你在做 JS 事件处理而不是仅仅使用标准表单并让浏览器做默认的事情？
中间会有一个Stripe API调用，需要等待响应，但是表单只是提交并跳过了preventDefault，所以我把其他所有东西都拿出来简化了它。
当您单击按钮时，您是否在浏览器的网络选项卡中收到任何响应？
看起来整个事件侦听器块由于某种原因没有触发。我删除了 event.preventDefault();因为我认为我不需要这个并添加了 console.log('On click check');直接在点击事件之后，但它从不显示。
Checking this URL, hopefully it is useful for you

标签： javascript ajax laravel forms

【解决方案1】：

最后，我将此追踪到标题中的脚本标记中存在“延迟”，这阻止了所有事件侦听器的工作。一旦我把它改成这个

<script src="{{ asset('js/app.js') }}"></script>

一切正常。

【讨论】：

【解决方案2】：

你必须这样使用

var payment    = '1234';
var CSRF_TOKEN =  $('meta[name="csrf-token"]').attr('content');

$.ajax({
    type: "POST",
    url: "{{url('')}}/payment-post",
    dataType: "text",
    data: {
        payment: payment,
        _token:  CSRF_TOKEN
    },
    success: function (response) {
        //Do something
    }

});

【讨论】：

谢谢AA，试过了，结果还是一样。