如何在不刷新页面的情况下使用 AJAX 和 php Laravel 发送联系表单答案

【问题标题】：How to use AJAX and php Laravel to send a contact form without refreshing the page如何在不刷新页面的情况下使用 AJAX 和 php Laravel 发送联系表单
【发布时间】：2018-02-19 15:17:14
【问题描述】：

我使用 Laravel 5.5 和 Mailtrap.io 创建了一个联系表单，效果很好。但是，我正在尝试在不重新加载页面的情况下发送联系表单来执行此操作，我正在使用 AJAX。但是，我不知道如何将 AJAX 与 Laravel 和 Mailtrap.io 连接起来。

这是我创建的表单。

@if(Session::has('success'))
<p class="alert {{ Session::get('alert-class', 'success') }}">{{ Session::get('success') }}</p>
@endif
<form action="{{ url('contact') }}" method="POST" class="wpcf7-form" novalidate="novalidate">
    {{ csrf_field() }}
    <div class="primary-form">
        <div class="col-xs-6">
            <span class="wpcf7-form-control-wrap text-768"><input type="text" name="first-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" placeholder="First Name" /></span>
        </div>
        <div class="col-xs-6">
            <span class="wpcf7-form-control-wrap text-768"><input type="text" name="last-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Last Name" /></span>
        </div>
        <div class="col-xs-6">
            <span class="wpcf7-form-control-wrap email-766"><input type="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="E-mail Address" /></span>
        </div>
        <div class="col-xs-6">
            <span class="wpcf7-form-control-wrap phone"><input type="text" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Phone Number" /></span>
        </div>
        <div class="col-xs-12">
            <span class="wpcf7-form-control-wrap textarea-6"><textarea name="message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Your Message"></textarea></span>
        </div>

        <div class="pull-right" style="margin-right:10px;">
            <p class="clearfix">
                <button type="submit" class="button button-simple btn-submit mt-30">SEND</button>
            </p>
        </div>
    </div>
</form>

我用来发送页面而不重新加载页面的 AJAX 方法。

$(".btn-submit").click(function(e){
    e.preventDefault();
    var first_name = $("input[name=first-name]").val();
    var last_name = $("input[name=last-name]").val();
    var email = $("input[name=email]").val();
    var phone = $("input[name=phone]").val();
    var bodyMessage = $("textarea[name=message]").val();

    $.ajax({
       type:'POST',
       url:'/contact',
       data:{first_name:first_name, last_name:last_name, email:email, phone:phone, bodyMessage:bodyMessage},
       success:function(data){
          alert(data.success);
       }
    });
});

这是我的 ContactController。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use Mail;
use Session;

class ContactController extends Controller
{
    public function postContact(Request $request){
        $this->validate($request, ['email' => 'required|email'] );

        $data = array(
            'first_name' => $request->first_name,
            'last_name' => $request->last_name,
            'email' => $request->email,
            'phone' => $request->phone,
            'bodyMessage' => $request->message
        );

        Mail::send('emails.contact', $data, function($message) use ($data){
            $message->from($data['email']);
            $message->to('jafar@calmcollective.co.uk');
            $message->subject('Contact Details');
        });

        Session::flash('success', 'Your E-mail was sent! Allegedly.');
        Session::flash('alert-class', 'alert-success');

        return redirect('contact');

    }
}

我在这上面花了几个小时。任何帮助将不胜感激。

【问题讨论】：

您的请求是否有任何错误？不要忘记在你的 ajax 上传递表单令牌
url:this.action,data:$(this).serialize(),?
@RafaelShkembi True 我忘了通过 ajax 添加表单令牌。我没有收到错误。我不知道如何从我的 Ajax 函数获取数据变量到我的contactController，所以我可以通过 mailtrap.io 发送联系表格。
Jafar，你是否设置了 ajax 传递给控制器的路由？
@Option Route::post('/contact', 'ContactController@PostContact');

标签： php jquery ajax laravel laravel-5

【解决方案1】：

首先，表单正在重新加载，因为您在提交按钮上使用了单击处理程序，希望防止出现默认值，您所拥有的：$(".btn-submit").click(function(e)，更改单击以提交：$("#form-id").submit(function(e)。

其次为什么不发送 FormData 对象而不是所有这些：

e.preventDefault();
    var first_name = $("input[name=first-name]").val();
    var last_name = $("input[name=last-name]").val();
    var email = $("input[name=email]").val();
    var phone = $("input[name=phone]").val();
    var bodyMessage = $("textarea[name=message]").val();

    $.ajax({
       type:'POST',
       url:'/contact',
       data:{first_name:first_name, last_name:last_name, email:email, phone:phone, bodyMessage:bodyMessage},
       success:function(data){
          alert(data.success);
       }
    });

试试这个：

e.preventDefault();
    var form = document.querySelector('#form-id');
    var data = new FormData(form);

    $.ajax({
       type:'POST',
       url:'/contact',
       data:data,
       success:function(data){
          alert(data.success);
       }
    });

在您的 php 中，您必须通过表单字段的名称访问变量。
编辑
要清楚地使用请求对象访问 php 脚本中的变量，请执行以下操作：$request->input('nameOfInputfield')，要以数组形式访问所有值，请使用 $request->all()

【讨论】：

您好，谢谢，但是您如何访问我的 ContactController.php 文件中的变量？
$request->all() 将所有内容作为数组提供，您也可以使用$name = $request->input('name') 单独访问

【解决方案2】：

从您对原始问题的回答中，我可以看到您的ContactController 方法的拼写错误：

Route::post('/contact', 'ContactController@PostContact');

应该是

Route::post('/contact', 'ContactController@postContact');

然后在你的javascript中，你应该监听表单提交事件，而不仅仅是提交按钮点击事件，并将csrf_token添加到数据中：

$("form.wpcf7-form").submit(function(e){
    e.preventDefault();
    var token = $("input[name=_token]").val(); // The CSRF token
    var first_name = $("input[name=first-name]").val();
    var last_name = $("input[name=last-name]").val();
    var email = $("input[name=email]").val();
    var phone = $("input[name=phone]").val();
    var bodyMessage = $("textarea[name=message]").val();

    $.ajax({
       type:'POST',
       url:'/contact',
       dataType: 'json',
       data:{_token: token, first_name:first_name, last_name:last_name, email:email, phone:phone, bodyMessage:bodyMessage},
       success:function(data){
          alert(data.success);
       }
    });
});

最后，您应该在 ContactController 中返回一个成功参数：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use Mail;
use Session;

class ContactController extends Controller
{
    public function postContact(Request $request){
        $this->validate($request, ['email' => 'required|email'] );

        $data = array(
            'first_name' => $request->first_name,
            'last_name' => $request->last_name,
            'email' => $request->email,
            'phone' => $request->phone,
            'bodyMessage' => $request->message
        );

        Mail::send('emails.contact', $data, function($message) use ($data){
            $message->from($data['email']);
            $message->to('jafar@calmcollective.co.uk');
            $message->subject('Contact Details');
        });

        return response()->json(['success' => 'Your E-mail was sent! Allegedly.'], 200);

    }
}

【讨论】：

谢谢，这很好用，但是当我在 Mailgun 上收到消息时，bodyMessage 变量没有显示。我还应该使用 {{ bodyMessage }} 来显示消息吗？
是的，在你的emails/contact.blade.php中你可以使用{{ $bodyMessage }}（变量名以$开头）来显示它

【解决方案3】：

我用 jquery 和 jquery 表单插件来做：

http://malsup.com/jquery/form/ jquery form plugin

【讨论】：

哦，好的，我可以将 {{ url('contact') }} 放在contact.php 中吗？
插件序列化所有表单数据并发送到动作值，并在成功和错误事件上都有回调函数。您需要做的就是定义为 ajaxform 并在提交事件上使用 ajaxsubit 函数。我会写一个例子告诉你它就像声音一样简单。

【解决方案4】：

你能尝试给 Ajax 属性dataType: "json" 吗？到时候应该可以拿到参数了。

如果你这样做了，你还需要根据 ajax 文档向 ajax 请求返回一个 json，这将是这样的：

return Response::json([
    'success' => 'Your E-mail was sent! Allegedly.',
    'alert-class' => 'alert-success'
]);

【讨论】：