Javascript 使用laravel和ajax重新加载部分页面

我正在尝试使用

ajax

提交表单，因此我的页面不会执行

全页重新加载

，而只是表单应该更改以显示任何错误。我在网上尝试了很多选择，但都没有成功。这是我见过的最好的帮助，

但是它没有给出解决方案<代码>注意：我使用的是laravel 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控制器：

 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::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() !!}

{！！表单：：打开（['route'=>'mail'，'method'=>'post'，'role'=>'Form'，'id'=>'footer Form']）
{！！Form:：label（'first_name'，null，['class'=>'sronly']）
{！！Form:：text（'first_name'，null，['class'=>'表单控件'，'占位符'=>'first name']）
@如果（$errors->has（'first_name'））
{{$errors->first（'first_name'）}
@恩迪夫
{！！Form:：label（'last_name'，null，['class'=>'sr only']）
{！！Form:：text（'last_name'，null，['class'=>'表单控件'，'占位符'=>'last name']）
@如果（$errors->has（'last_name'））
{{$errors->first（'last_name'）}
@恩迪夫
{！！Form:：label（'email'，null，['class'=>'sronly']）
{！！Form:：email（'email'，null，['class'=>'表单控件'，'占位符'=>'电子邮件地址']）
@如果（$errors->has（'email'））
{{$errors->first（'email'）}
@恩迪夫
{！！Form:：label（'message'，null，['class'=>'sronly']）
{！！Form:：textarea（'message'，null，['class'=>'表单控件'，'rows'=>8，'占位符'=>'message']）
@如果（$errors->has（'message'））
{{$errors->first（'message'）}
@恩迪夫
{！！Form:：submit（'Send'，['class'=>'btn-btn-default'，'id'=>'mail\u-btn']）
{！！Form:：close（）！！}

您需要做的是呈现要通过ajax的视图，如下所示：

return view('passed')->render();

编辑

您必须将

event

作为clouser参数传递并取消注释：

//event.preventDefault（）：

以便：

click(function () {

为什么它不起作用。应该是：

click(function (event) {

您需要做的是呈现要通过ajax的视图，如下所示：

return view('passed')->render();


编辑

您必须将
event
作为clouser参数传递并取消注释：
//event.preventDefault（）：

以便：

click(function () {

为什么它不起作用。应该是：

click(function (event) {

使用location.reload（）；成功时，
.done（函数（数据）{console.log（数据）；}）在控制台中显示？我注意到您正在从控制器方法返回一个视图，为什么不直接返回json数据，这些数据可以通过JS附加到DOM中？@DavidDomain，我从
if（$request->ajax（））{}
块得到一个错误，因为我被定向到错误视图
视图（'fail'）
。使用location.reload（）；成功时，
.done（函数（数据）{console.log（数据）；}）在控制台中显示？我注意到您正在从控制器方法返回一个视图，为什么不直接返回json数据，这些数据可以通过JS附加到DOM中？@DavidDomain，我从
if（$request->ajax（））{}
块得到一个错误，因为我被定向到错误视图
视图（'fail'））
.my
ajax请求
甚至没有通过
if（$request->ajax（））{}
块。我试图让
控制器
使用ajax捕获表单数据，从而防止整个
页面重新加载
。当我去掉
if（$request->ajax（））{}
块时，代码
使用laravel控制器验证
，但是
整个页面重新加载
。为什么要对此进行注释：
//event.preventDefault（）;
我将在edit中向您展示我注意到表单没有发布到
url
，因此我将其删除以使其执行默认行为我添加了
事件
变量，但仍然不会传递到
if块
我的
ajax请求
甚至没有通过
if（$request->ajax（））{}
块。我试图让
控制器
使用ajax捕获表单数据，从而防止整个
页面重新加载
。当我去掉
if（$request->ajax（））{}
块时，代码
使用laravel控制器验证
，但是
整个页面重新加载
。为什么要对此进行注释：
//event.preventDefault（）;
我将在edit中向您展示我注意到表单没有发布到
url
，因此我将其删除以使其执行默认行为我添加了
事件
变量，但仍然不会传递到
if块