使用laravel使用ajax在模态中提交表单

时间:2016-02-28 10:24:06

标签: ajax forms bootstrap-modal laravel-5.2

我正在尝试通过加载在模态中的表单上传文本和文件,并使用ajax(我正在使用Laravel 5.2)提交它,我无法弄清楚它为什么不起作用。我在这里和通过搜索引擎尝试了很多解决方案。

一个简单的表单(此表单以模态加载)

<form id="registerForm" enctype="multipart/form-data" class="form-horizontal" role="form" method="POST">


<div class="form-group">
<label class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input type="text" class="form-control" name="name" id="name">

<div class="form-group">
<label class="control-label col-md-4" for="pwd">Choose File</label>
<div class="col-md-6"> 
<input type="file" class="form-control" id="fileProfPic" name="prof_pic">
</div>
</div>

<button type="submit" id="registerButtonModal" class="btn btn-primary"><i class="fa fa-btn fa-user"></i>Register</button>
</form>

的.js

$("#registerButtonModal").click(function(){
    $('#registerForm').submit(function (e) {
        e.preventDefault();
        var formData = new FormData($('#registerForm')[0]);

        $.ajax({
            url: 'register',
            type: 'POST',
            data: formData,
            success: function(msg){
                alert(msg);
            }
            contentType: false,
            processData: false

        });
        });
});

路线

 Route::post('register',[
        'uses' => 'AdminController@postRegister',
        'as' => 'postRegister']);

控制器//只是尝试让它工作

public function postRegister(Request $request)
    {
        return "success";
    }

1 个答案:

答案 0 :(得分:0)

您的问题可能是因为您的AJAX应该使用您的控制器返回JSON响应。

尝试以下方法:

public function postRegister(Request $request)
    {
        return response()->json(['success' => 'success']);
    }

通过上述内容,您现在可以访问视图中的对象。

另外,请记住在AJAX中传递CSRF令牌。我通常在我的视图中添加这个,当我使用AJAX时,我将该变量传递给数据,如下所示:

<script>
    var token = '{{ Session::token() }}';
</script>

$.ajax({
        url: 'register',
        type: 'POST',
        data: {variable1: variable1, variable2: variable2, _token: token},,
        success: function(msg){
            alert(msg);
        }
        contentType: false,
        processData: false

    });