使用 jQuery AJAX 从 Laravel 5 中的联系表单发送电子邮件
Posted
技术标签:
【中文标题】使用 jQuery AJAX 从 Laravel 5 中的联系表单发送电子邮件【英文标题】:Send email from contact form in Laravel 5 using jQuery AJAX 【发布时间】:2017-03-23 06:46:52 【问题描述】:我在 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" ></div>
</div>
我在 routes.php 中设置了我的路线:
Route::get('/', 'HomeController@index');
Route::post('/',
['as' => 'contact_store', 'uses' => 'HomeController@store']);
我有 jQuery 验证器验证集,它可以正常工作。通过验证后,我正在调用 ajax 来发送数据。
$('#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;
在我的控制器中,我有:
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('mymail@gmail.com')->subject('Contact form');
);
$response = [
'status' => 'success',
'msg' => 'Mail sent successfully',
];
return response()->json([$response], 200);
在我的 ContactFormRequest.php 中有:
public function authorize()
return true;
public function rules()
return [
'firstName' => 'required',
'lastName' => 'required',
'email' => 'required|email',
'message' => 'required|min:10'
];
我配置了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('mymail@gmail.com'),
'password' => env('mypass'),
'sendmail' => '/usr/sbin/sendmail -bs',
我在资源/视图/电子邮件中添加了名为 mail.blade.php 的刀片文件。 我使用 jquery 验证器在 js 中设置的验证效果很好,但是当验证正常并且需要发送 ajax 时,我得到了错误: 抛出的错误:SyntaxError:意外的令牌 jqXHR:[object Object]textStatus:parsererror
我认为来自控制器的 json 没有很好地传递,但我不知道如何修复它。
【问题讨论】:
return response()->json($response, 200);
怎么样?你能console.log()
jqXHR
、textStatus
、errorThrown
中的每一个告诉我们结果吗?
jqXHR -> 对象 readyState: 4, responseText: "↵↵ 问题在于未随表单发送的 csrf 令牌。 所以我加了
var _token = $('[name="_token"]').val(),
并与其他表单数据一起发送,一切正常。
【讨论】:
以上是关于使用 jQuery AJAX 从 Laravel 5 中的联系表单发送电子邮件的主要内容,如果未能解决你的问题,请参考以下文章
Jquery:使用 laravel 的跨域 ajax 'POST'
使用 jQuery AJAX 从 Laravel 5 中的联系表单发送电子邮件
在 Laravel 4 中从 Jquery Ajax Json 中检索值
Storage::disk('s3')->url() 在 jquery ajax laravel 中使用