如何在 Laravel 6 中使用 Ajax 提交表单？答案

【问题标题】：How to submit Form using Ajax in Laravel6?如何在 Laravel 6 中使用 Ajax 提交表单？
【发布时间】：2019-12-25 18:31:15
【问题描述】：

我正在尝试使用 ajax 提交表单，但我被归档了，当我点击提交按钮时，它不是使用 ajax 提交，而是使用表单方法提交。请让我知道我在哪里弄错了。

这是我的 Ajax 表单数据：

 <script>
  $("#query_form").submit(function(event) {
    event.preventDefault();
      //alert('dd');
      var forData = $('form#query_form').serialize();
      var url = $('form#query_form').prop('action');
      $.ajax({
        url: url,
        data:forData,
        type: "POST",
        dataType: 'JSON',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        success: function( response ) {
          alert('dd');
          $('#send_form').html('Submit');
          $('#res_message').show();
          $('#res_message').html(response.msg);
          $('#msg_div').removeClass('d-none');

          document.getElementById("query_form").reset(); 
          setTimeout(function(){
            $('#res_message').hide();
            $('#msg_div').hide();
          },10000);
        }
      });
    });

这里是表单视图数据...

<form name="callback" id="query_form" method="post" action="{{url('/postEmail')}}">
                    @csrf
                    <div class="form-section3 left"><i class="fa fa-user-o" aria-hidden="true" style="font-size: 18px; color: #fff;"></i>
          <input name="user_name" type="text" placeholder="Your Name" class="inputxt" required="">
        </div>
        <div class="form-section3 left"><i class="fa fa-mobile" aria-hidden="true" style="font-size: 22px; color: #fff;"></i>
          <input name="user_phone" type="number" pattern="[789][0-9]{9}" placeholder="Mobile No" class="inputxt" required="">
        </div>
        <div class="form-section3 left"><i class="fa fa-at" aria-hidden="true" style="font-size: 22px; color: #fff;"></i>
          <input name="user_email" type="email" class="inputxt" placeholder="Email ID" required="">
          <input name="project" id="project" type="hidden" value="Aipl Joy Square">
        </div>
        <div class="alert alert-success d-none" id="msg_div">
          <span id="res_message"></span>
        </div>
        <div class="form-section3 left">
          <input type="submit" value="Submit" id="send_form" name="send" class="btn-submit">
        </div>
      </form>

【问题讨论】：

这是 JS 问题。检查网页控制台是否有错误

标签： jquery ajax laravel laravel-6 laravel-6.2

【解决方案1】：

脚本是在页面末尾还是开头？

我问是因为如果它在开始时，那么 $("#query_form").submit 侦听器是在加载 DOM 之前设置的，因此看不到 #query_form 元素。

我建议你使用较新的语法 $('form').on('submit', function(e){ 或用 $(document).ready(function() { 包围你的 js 代码或两者兼而有之。

【讨论】：