在 Laravel 5.5 中使用 AJAX 提交表单

Question

我正在尝试在 Laravel 5.5 中使用 ajax 提交表单 问题是页面正在刷新并且没有在数据库中提交数据。我需要在不刷新页面的情况下将数据存储在数据库中。
这是我的代码：

控制器

public function new_timing_table(Request $request)
{
    if (Request::ajax()) {
        $timing_tables =  new Timing_Table;
        $timing_tables->timing_tables_name = $request->timing_tables_name;
        $timing_tables->save();
        $msg = "yes";
    } else {
        $msg = "yes";
    }
    return ['msg'=> $msg];
}

查看

<form id="timeForm" class="form-horizontal form-material" >                                                                      
  <div class="form-group">                                                                      
   {{ csrf_field() }}
   <div class="col-md-12 m-b-20">
   <label> Table Name</label>
   <input type="text" id="timing_tables_name" class="form-control" 
   name="timing_tables_name" />                                                                            
   </div>
   <div class="modal-footer">
   <input type="button" value="Replace Message" id='btnSelector'>
   </div>
  </div>
</form>

Ajax 脚本

const xCsrfToken = "{{ csrf_token() }}";
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': xCsrfToken
    }
});


jQuery(document).ready(function() {
    jQuery('#btnSelector').click(function(e) {
        event.preventDefault();
        getMessage();
    });
});
var getMessage = function() {
    var timing_tables_name = $("input[name=timing_tables_name]").val();
    $.ajax({
        type: 'post',
        url: '/new_timing_table',
        dataType: 'json', //Make sure your returning data type dffine as json
        data: timing_tables_name,
        //data:'_token = <php echo csrf_token() ?>',
        success: function(data) {
            console.log(data); //Please share cosnole data
            if (data.msg) //Check the data.msg isset?
            {
                $("#msg").html(data.msg);
            }
        }
    });
}

路由器

 Route::post('/new_timing_table','Timing_TableControoler@new_timing_table');

Answer 1

在 Ajax 脚本中添加 beforeSend: function (request) 后，我的代码现在可以工作了

var getMessage = function(){
var timing_tables_name = $("#timing_tables_name").val();
console.log(timing_tables_name);

$.ajax({
    type:'GET',
    url:'/new_timing_table', //Make sure your URL is correct
    dataType: 'json', //Make sure your returning data type dffine as json
     data: 
     {
         timing_tables_name
     },
    beforeSend: function (request) {
            return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf- 
     token']").attr('content'));
        },
    success:function(data){
        console.log(data); //Please share cosnole data
        if(data.msg) //Check the data.msg isset?
        {
            $("#msg").html(data.msg); //replace html by data.msg
        }

    }
});
 }

将控制器编辑得像这个一样简单

  public function new_timing_table(Request $request){
    $timing_tables =  new Timing_Table;
    $timing_tables->timing_tables_name = $request->timing_tables_name;
    $timing_tables->save();
     $msg = "This is a simple message.";
     return ['msg'=> $msg];
      }

谢谢大家的帮助

Answer 2

您的脚本中有错字或错误。

jQuery('#btnSelector').click(function(e){
    // An error here - it should be e.preventDefault();
    event.preventDefault();
    getMessage();
});