如何使用AJAX和PHP Laravel发送联系人表格而无需刷新页面

Question

我已经使用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');

    }
}

我已经花了几个小时。 任何帮助将不胜感激。

Answer 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()

Answer 2

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

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

应该

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

然后在您的javascript中，您应该侦听表单的commit事件，不仅要监听commit按钮的clicked事件，还要将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);

    }
}

Answer 3

我曾经用jquery和jquery表单插件来做到这一点：

http://malsup.com/jquery/form/ jQuery表单插件

Answer 4

您可以尝试为Ajax提供Attribute dataType: "json"吗？ 然后，您应该能够获取参数。

如果这样做，您还需要根据ajax文档将json返回给ajax请求，这将是这样的：

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