使用jQuery AJAX从Laravel 5中的联系表单发送电子邮件 [英] Send email from contact form in Laravel 5 using jQuery AJAX

问题描述

我在Laravel刀片中有联系表:

I have contact form in Laravel blade:

<div id="contactform">
    <meta name="_token" content="{{ csrf_token() }}" /> 
    <ul>
    @foreach($errors->all() as $error)
        <li>{{ $error }}</li>
    @endforeach
    </ul>
    {{ Form::open(array('route' => 'contact_store', 'id' => 'contact', 'name' => 'contact')) }}
        <input type="text" id="firstName" name="firstName" placeholder="{{ trans('index.first_name') }}" class="required" />
        <input type="text" id="lastName" name="lastName" placeholder="{{ trans('index.last_name') }}" class="required" />
        <input type="text" id="email" name="email" placeholder="{{ trans('index.email') }}" class="required email" />
        <textarea id="message" name="message" cols="40" rows="5" placeholder="{{ trans('index.message') }}" class="required"></textarea>
        <input id="submit" class="send_it" name="submit" type="submit" value="{{ trans('index.submit_button') }}" />
    {{Form::close()}}
    <div id="response"></div>
    <div id="loading"><img src="images/loader.gif" alt="loader"></div>
</div>

我在route.php中设置了我的路线:

I have my routes set in routes.php:

Route::get('/', 'HomeController@index');
Route::post('/', 
['as' => 'contact_store', 'uses' => 'HomeController@store']);

我有jQuery验证程序验证集，它可以正常工作.通过验证后，我正在调用ajax发送数据.

I have jQuery validator validation set and it works correctly. When validation is passed I'm calling ajax to send data.

 $('#submit').click( function(e) {
     $.ajaxSetup({
         header:$('meta[name="_token"]').attr('content')
      })
      e.preventDefault;
      if( $('#contact').valid() ) {
         ajaxSubmit();
       }
       else {
           $('label.error').hide().fadeIn('slow');
       }
       });
   });

function ajaxSubmit() {
$('#loading').show();
$('#submit').attr('disabled', 'disabled');
var firstName = $('#firstName').val();
var lastName = $('#lastName').val();
var email = $('#email').val();
var message = $('#message').val();

var data = 'firstName=' +firstName+ '&lastName=' +lastName+ '&email=' +email+ '&message=' +message;

$.ajax({
    url: '/',
    type: 'get',
    dataType: 'json',
    data: data,
    cache: false,
    success: function(response) {
            $('#loading, #contact, .message').fadeOut('slow');
            $('#response').html('<h3>'+Lang.get('index.email_sent')+'</h3>').fadeIn('slow');
    },
    error: function(jqXHR, textStatus, errorThrown) {
            $('#loading').fadeOut('slow');
            $('#submit').removeAttr('disabled');
            $('#response').text('Error Thrown: ' +errorThrown+ '<br>jqXHR: ' +jqXHR+ '<br>textStatus: ' +textStatus ).show();
    }
});
return false;
}

在我的控制器中，我有:

And in my controller I have:

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App;
use App\Http\Requests;
use App\Http\Requests\ContactFormRequest;
use Mail;

class HomeController extends Controller
{
public function index()
{
    return view('index');
} 
public function store(ContactFormRequest $request)
{
    Mail::send('email.mail',
    [
        'name' => $request->get('firstName'),
        'email' => $request->get('email'),
        'message' => $request->get('message')
    ], function($message)
    {
        $message->from($request->get('email'));
        $message->to('[e-mail]')->subject('Contact form');
    });
    $response = [
        'status' => 'success',
        'msg' => 'Mail sent successfully',
    ];
    return response()->json([$response], 200);
}
}

在我的ContactFormRequest.php中，我有:

And in my ContactFormRequest.php I have:

public function authorize()
{
    return true;
}
public function rules()
{
    return [
        'firstName' => 'required',
        'lastName' => 'required',
        'email' => 'required|email',
        'message' => 'required|min:10'
    ];
}
}

然后我配置了config/mail.php:

And I configured config/mail.php:

'driver' => env('MAIL_DRIVER', 'smtp'),
'host' => env('MAIL_HOST', 'smtp.gmail.com'),
'port' => env('MAIL_PORT', 465),
'from' => ['address' => null, 'name' => null],
'encryption' => env('MAIL_ENCRYPTION', 'ssl'),
'username' => env('[e-mail]'),
'password' => env('mypass'),
'sendmail' => '/usr/sbin/sendmail -bs',

我在资源/视图/电子邮件中添加了名为mail.blade.php的刀片文件.我使用jquery验证程序在js中设置的验证效果很好，但是当验证正常时，当需要发送ajax时，我遇到了错误:引发错误:SyntaxError:意外令牌<在JSON中位置0处
jqXHR:[object Object]
textStatus:parsererror

I added blade file called mail.blade.php in resources/views/email. Validation that I set in js with jquery validator works good, but when validation is ok and it comes to part when ajax needs to be send I got error: Error Thrown: SyntaxError: Unexpected token < in JSON at position 0
jqXHR: [object Object]
textStatus: parsererror

我认为来自控制器的json传递得不好，但是我不知道如何解决它.

I think json from controller is not passed well but I can't figure out how to fix it.

推荐答案

问题出在csrf令牌中，该令牌未与表单一起发送.所以我加了

Problem was in csrf token that wasn't sending with form. So I added

var _token = $('[name="_token"]').val(),

并与其他表单数据一起发送，一切正常.

and send it with other form data and everything is ok.

这篇关于使用jQuery AJAX从Laravel 5中的联系表单发送电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！