[英]Partial page reload using laravel and ajax
我正在尝试使用ajax
提交表单,因此我的页面不会执行full page reload
而只是表单应该更改以显示任何错误。 我从网上尝试了很多选项而没有运气。 这这里是我见过的最好的帮助, but
它并没有给予解决。 Note I am using laravel version 5.3.10
。
这是我的代码:
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('#footer-form').click(function () {
//event.preventDefault();
$.ajax({
type: 'POST',
url: 'http://localhost/ensignhospital/mail',
data: $('form#footer-form').serialize(),
dataType: 'html'
})
.done(function (data) {
console.log(data);
});
});
});
</script>
Laravel Route:
Route::group(['before' => 'guest'], function () {
/*
* CSRF Protection
*
* */
Route::group(['before' => 'csrf'], function () {
Route::post('/ensignhospital/mail', [
'as' => 'mail',
'uses' => 'HomeController@postSendMail'
]);
});
});
Laravel controller:
public function postSendMail(Request $request)
{
if($request->ajax()){
$validator = Validator::make($request->all(), [
'first_name' => 'required',
'last_name' => 'required',
'email' => 'required|email',
'message' => 'required',
'g-recaptcha-response' => 'required|captcha'
]);
if($validator->fails()){
return redirect()->back()
->withErrors($validator)
->withInput(Input::all());
}else{
return View('passed');
}
}else{
return View('fail');
}
}
Form:
{!! Form::open(['route' => 'mail', 'method' => 'post', 'role' => 'form', 'id' => 'footer-form']) !!}
<div class="form-group has-feedback">
{!! Form::label('first_name', null, ['class' => 'sr-only']) !!}
{!! Form::text('first_name', null, ['class' => 'form-control', 'placeholder' => 'First Name']) !!}
<i class="fa fa-user form-control-feedback"></i>
@if($errors->has('first_name'))
{{ $errors->first('first_name') }}
@endif
</div>
<div class="form-group has-feedback">
{!! Form::label('last_name', null, ['class' => 'sr-only']) !!}
{!! Form::text('last_name', null, ['class' => 'form-control', 'placeholder' => 'Last Name']) !!}
<i class="fa fa-user form-control-feedback"></i>
@if($errors->has('last_name'))
{{ $errors->first('last_name') }}
@endif
</div>
<div class="form-group has-feedback">
{!! Form::label('email', null, ['class' => 'sr-only']) !!}
{!! Form::email('email', null, ['class' => 'form-control', 'placeholder' => 'Email address']) !!}
<i class="fa fa-envelope form-control-feedback"></i>
@if($errors->has('email'))
{{ $errors->first('email') }}
@endif
</div>
<div class="form-group has-feedback">
{!! Form::label('message', null, ['class' => 'sr-only']) !!}
{!! Form::textarea('message', null, ['class' => 'form-control', 'rows' => 8, 'placeholder' => 'Message']) !!}
<i class="fa fa-pencil form-control-feedback"></i>
@if($errors->has('message'))
{{ $errors->first('message') }}
@endif
</div>
{!! Form::submit('Send', ['class' => 'btn btn-default', 'id' => 'mail_btn']) !!}
{!! Form::close() !!}
你需要做的是渲染你希望通过ajax传递的视图,如下所示:
return view('passed')->render();
...
return view('fail')->render();
编辑
您必须将event
作为clouser参数传递并取消注释: //event.preventDefault();
:
$('#footer-form').click(function (event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'http://localhost/ensignhospital/mail',
data: $('form#footer-form').serialize(),
dataType: 'html'
})
.done(function (data) {
console.log(data);
});
});
以便:
click(function () {
为什么它不起作用。 应该:
click(function (event) {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.