如何使用AJAX和php Laravel发送联系人表单而不刷新页面

Question

我已经创建了一个使用Laravel5.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

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

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

应该是

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

然后，在javascript中，您应该侦听表单提交事件，而不仅仅是submit按钮单击的事件，并将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 2

首先，表单正在重新加载，因为您在提交按钮上使用了单击处理程序，希望防止默认设置：$(".btn-submit").click(function(e)，将单击更改为submit：$("#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 3

我经常用jquery和jquery表单插件来完成这个任务：

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