我正在努力使用 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();
});
});
非常感谢您的帮助。这是我第一次尝试在不重新加载页面的情况下提交表单。
干杯。
最佳答案
我很遗憾地承认，我花了几天时间认为问题一定出在 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 之间不会混淆是简单的答案!
关于javascript - 在 Laravel 5.1 中通过 ajax 提交表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34835296/