通过Laravel 5.1中的ajax提交表单
[英]Submitting form via ajax in Laravel 5.1
问题描述
我正在努力使用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');
控制器方法：
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();
});
});
非常感谢你的帮助。 这是我第一次尝试提交没有页面重新加载的表单。
干杯。
1 个解决方案
解决方案1
1 已采纳 2016-01-19 04:09:52
我很遗憾地承认我花了好几天时间以为问题一直是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”中的参数“并且数据被发布到错误的控制器方法。
简单地重命名路线，以便它与其他控制器之间不会混淆是一个简单的答案！
通过AJAX提交表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.