Question

我已经完成了Modal表单并尝试提交该表单，但是该表单不起作用。

这是我的表单

  <div class="modal-body">
                    <div class="card-body">
                        <form  action="{{ url('/admin/modaluser/add')}}" method="POST" id="customerSubmit">
                        <div class="row">
                            <div class="col">
                                @if(session('success'))
                                    <div class="alert alert-success">{{session('success')}}</div>
                                @endif
                                @if(session('error'))
                                    <div class="alert alert-error">{{session('error')}}</div>
                                @endif
                                @csrf
                                <div class="row">
                                    <div class="form-group col-md-6">

                                        <label for="name">Name</label>
                                        <input class="form-control" name="name" id="name"
                                               type="text"
                                               placeholder="Enter Name" data-original-title="" title=""
                                               required>
                                    </div>
                                    <div class="form-group col-md-6">

                                        <label for="hpcontact">HP Contact No</label>
                                        <input class="form-control" name="hpcontact" id="hpcontact"
                                               type="text"
                                               placeholder="HP Contact No" data-original-title="" title=""
                                               required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-6">

                                        <label for="icno">IC No</label>
                                        <input class="form-control" name="icno" id="icno"
                                               type="text"
                                               placeholder="Enter IC No" data-original-title="" title=""
                                               required>
                                    </div>

                                    <div class="form-group col-md-6">

                                        <label for="homephone">Home Contact No</label>
                                        <input class="form-control" name="homephone" id="homephone"
                                               type="text"
                                               placeholder="Enter home contact no" data-original-title="" title=""
                                               required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-6">

                                        <label for="dob">D.O.B</label>
                                        <input class="form-control" name="dob" id="dob"
                                               type="date"
                                               placeholder="Enter DOB" data-original-title="" title=""
                                               required>
                                    </div>
                                    <div class="form-group col-md-6">

                                        <label for="officeno">Office No</label>
                                        <input class="form-control" name="officeno" id="officeno"
                                               type="text"
                                               placeholder="Enter Office No" data-original-title="" title=""
                                               required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-6">

                                        <label for="address">Address</label>
                                        <input class="form-control" name="address" id="address"
                                               type="text"
                                               placeholder="Enter Address" data-original-title="" title=""
                                               required>
                                    </div>

                                    <div class="form-group col-md-6">

                                        <label for="email">Email</label>
                                        <input class="form-control" name="email" id="email"
                                               type="email"
                                               placeholder="Enter Email" data-original-title="" title=""
                                               required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </form>

                    </div>

  </div>

这是我的Ajax jQuery

$(document).ready(function(){

  $('body').on('click','#addcustomer',function(e){
    e.preventDefault(); 
    // AJAX request 
    console.log($('#customerSubmit').serialize())
    $.ajax({
        method: 'post',
        url: '/admin/modaluser/add',
        data: $('#customerSubmit').serialize(),
        success: function(msg) {
            console.log(msg);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log("some error");
        }
    });
  });

});

这是我的控制器

public function adduser(Request $request)
{
    if(Request::ajax()){
        $name       = Input::get( 'name' );
        $hpcontact  = Input::get( 'hpcontact' );
        $icno       = Input::get( 'icno' );
        $homephone  = Input::get( 'homephone' );
        $dob        = Input::get( 'dob' );
        $officeno   = Input::get( 'officeno' );
        $address    = Input::get( 'address' );
        $email      = Input::get( 'email' );
        $customer = new Customer();
        $customer->name = $name;
        $customer->hpcontact = $hpcontact;
        $customer->icno = $icno;
        $customer->homephone = $homephone;
        $customer->dob = $dob;
        $customer->officeno = $officeno;
        $customer->address = $address;
        $customer->email = $email;
        $customer->save();
        $response = array(
            'status' => 'success',
            'msg' => 'Customer created successfully',
        );
        return Response::json($response); 
    }
    else {
        echo 'no';
        exit;
    }
}

最后，这是我的路由器

Route::post('modaluser/add', 'CustomerController@adduser')->name('customer.adduser');

当我单击按钮时，什么也没发生。但是这个错误来了。 POST http://127.0.0.1:8000/admin/modaluser/add 500（内部服务器错误）并向我展示了控制台错误，该错误在ajax中定义。我做错什么了吗？这是我在Laravel中的第一个Ajax。请帮我解决这个问题。预先感谢。

Answer 1

将/admin添加到您的路线中：

Route::post('admin/modaluser/add', 'CustomerController@adduser')->name('customer.adduser');

并更改ajax中的url路径：

$(document).ready(function(){

  $(document).on('submit','#customerSubmit',function(e){
    e.preventDefault(); 
    // AJAX request 
    console.log($(this).serialize())
    $.ajax({
        method: 'post',
        url: "{{route('customer.adduser')}}",
        data: $(this).serialize(),
        success: function(msg) {
            console.log(msg);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log("some error");
        }
    });
  });
});

删除表单操作：

<form  action="" method="POST" id="customerSubmit">

Answer 2

您应该检查是否在控制器顶部声明的所有类使用的路径。您应该在ajax请求中添加CSRF标头。

$.ajax({
    method: 'post',
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    url: "route name or url",
    data: $(this).serialize(),
    success: function(msg) {
        console.log(msg);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        console.log("some error");
    }
});

在Laravel中提交模态框形式

2 个答案: