javascript - 在 Laravel 5.1 中通过 ajax 提交表单

Question

我正在努力使用 ajax 和 Laraval 5.1 提交此表单。我一直在搜索和尝试了几天，但收效甚微。这是我目前能得到的最接近的。提交表单会导致 200 POST 状态成功，但控制台显示为空？数据库应该更新，但没有更新，所以我必须假设数据没有正确地从表单发送。这里使用的jquery版本是2.1.4。该表单位于模态弹出窗口中，以防可能产生任何影响。

这是我的代码:

表格:

        <form id="addVendorForm" class="form-horizontal" method="POST" 
            action="{{URL::to('admin/settings/vendors/add-vendor')}}">
            <!-- Hidden input fields -->
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" name="shop_id" value="{{$data['shop_id']}}">

            <!-- Vendor Name -->
            <div class="form-group has-feedback">
                <label for="vendor_name" class="col-sm-3 control-label">Vendor</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" 
                        name="vendor_name" id="vendor_name" 
                        placeholder="Vendor name"
                        required
                        value="{{ old('vendor_name') }}">
                </div>
                </div><!-- /.form-group -->

                <!-- Vendor Phone -->
                <div class="form-group has-feedback">
                <label for="vendor_phone" class="col-sm-3 control-label"></label>
                <div class="col-sm-9">
                    <input type="tel" class="form-control" 
                        name="vendor_phone" id="vendor_phone" 
                        placeholder="Phone"
                        value="{{ old('vendor_phone') }}">
                </div>
                </div><!-- /.form-group -->

                <!-- Vendor Email -->
                <div class="form-group has-feedback">
                <label for="vendor_email" class="col-sm-3 control-label"></label>
                <div class="col-sm-9">
                    <input type="email" class="form-control" 
                        name="vendor_email" id="vendor_email" 
                        placeholder="Email"
                        value="{{ old('vendor_email') }}">
                </div>
                </div><!-- /.form-group -->


                <!-- Address -->
                <div class="form-group has-feedback">
                <label for="address_1" class="col-sm-3 control-label">Address</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" 
                        name="address_1" id="address_1" 
                        placeholder="Street address"
                        value="{{ old('address_1') }}">
                </div>
            </div><!-- /.form-group -->
            <div class="form-group has-feedback">
                <label for="address_2" class="col-sm-3 control-label"></label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" 
                        name="address_2" id="address_2" 
                        placeholder="Apartment, suite, unit, building, floor, etc."
                        value="{{ old('address_2') }}">
                </div>
                </div><!-- /.form-group -->

                <!-- City -->
                <div class="form-group has-feedback">
                <label for="city" class="col-sm-3 control-label"></label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" 
                        name="city" id="city" 
                        placeholder="City, town"
                        value="{{ old('city') }}">
                </div>
                </div><!-- /.form-group -->

                <!-- State/Province/Region -->
                <div class="form-group has-feedback">
                <label for="state_region" class="col-sm-3 control-label"></label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" 
                        name="state_region" id="state_region" 
                        placeholder="State, province, region, territory, etc."
                        value="{{ old('state_region') }}">
                </div>
                </div><!-- /.form-group -->

                <!-- Country -->
                <div class="form-group has-feedback">
                <label for="country" class="col-sm-3 control-label"></label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" 
                        name="country" id="country" 
                        placeholder="Country"
                        value="{{ old('country') }}">
                </div>
                </div><!-- /.form-group -->

                <!-- Postal Code -->
                <div class="form-group has-feedback">
                <label for="postal_code" class="col-sm-3 control-label"></label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" 
                        name="postal_code" id="postal_code" 
                        placeholder="Postal code"
                        value="{{ old('postal_code') }}">
                </div>
                </div><!-- /.form-group -->

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button id="submitVendor" type="submit" class="btn btn-primary">Add Vendor</button>         
        </div>
    </form>

路线:

Route::post('admin/settings/vendors/add-vendor', 'JsonController@addVendor');

Controller 方法:

    public function addVendor(Request $request) 
{

    // validate new vendor form
    $this->validate($request, [
        'vendor_name' => 'required|min:2|max:255',
        'vendor_phone' => 'phone:AUTO,US,CA',
        'vendor_email' => 'email|max:255',
        'address_1' => 'max:255',
        'address_2' => 'max:255',
        'city' => 'max:255',
        'state_region' => 'max:255',
        'country' => 'max:255',
        'postal_code' => 'max:255'
    ]);

    // if validation passed, store new vendor in database
    $vendor = new Vendor;
    $vendor->shop_id = $request->shop_id;
    $vendor->vendor_name = $request->vendor_name;
    $vendor->vendor_phone = $request->vendor_phone;
    $vendor->vendor_email = $request->vendor_email;
    $vendor->address_1 = $request->address_1;        
    $vendor->address_2 = $request->address_2;
    $vendor->city = $request->city;
    $vendor->state_region = $request->state_region;
    $vendor->country = $request->country;
    $vendor->postal_code = $request->postal_code;        
    $vendor->save();

    $data['vendor_id'] = $vendor->id;
    $data['vendor_name'] = $vendor->vendor_name;

    // return data
    return response()->json($data);

}

Javascript:

    // add-vendor.js
$(document).ready(function() {

    // process the form
 $('#addVendorForm').submit(function(e) {
            $.ajax({
                type: 'POST',
                url: '../../admin/settings/vendors/add-vendor/',
                data: $('#addVendorForm').serialize(),
                success : function(data){
                    console.log(data);
                },
                error: function(errors){
                    console.log(errors);
                }
            });

            e.preventDefault();
        });            

});

非常感谢您的帮助。这是我第一次尝试在不重新加载页面的情况下提交表单。

干杯。

Answer 1

我很遗憾地承认，我花了几天时间认为问题一定出在 ajax 请求上，但事实证明是路由问题。我会在这里发布我的解决方案，希望能防止像我这样的新手犯同样的错误。

我设置了一系列用于创建、显示、编辑、更新等的路由，并将路由放在最后一个 ajax 表单处理程序。

// vendors
Route::get('admin/settings/vendors', 'Admin\VendorController@index');
Route::get('admin/settings/vendors/create', 'Admin\VendorController@create');
Route::post('admin/settings/vendors', 'Admin\VendorController@store');
Route::get('admin/settings/vendors/{id}', 'Admin\VendorController@show');
Route::post('admin/settings/vendors/{id}', 'Admin\VendorController@update');
Route::get('admin/settings/vendors/{id}/edit', 'Admin\VendorController@edit');
Route::post('admin/settings/vendors/add-vendor', 'JsonController@addVendor');

路由器显然会依次检查匹配的路由，直到找到为止，因此“admin/settings/vendor/add-vendor”末尾的“add-vendor”被捕获为“admin/settings/vendor”中的参数/{id}"并且数据被发送到错误的 Controller 方法。

简单地重命名路线，使其与其他 Controller 之间不会混淆是简单的答案!