使用 jQuery AJAX 从 Laravel 5 中的联系表单发送电子邮件

2024-04-17

我在 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>

我在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('[email protected] /cdn-cgi/l/email-protection')->subject('Contact form');
    });
    $response = [
        'status' => 'success',
        'msg' => 'Mail sent successfully',
    ];
    return response()->json([$response], 200);
}
}

在我的 Contact FormRequest.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('[email protected] /cdn-cgi/l/email-protection'),
'password' => env('mypass'),
'sendmail' => '/usr/sbin/sendmail -bs',

我在 resources/views/email 中添加了名为 mail.blade.php 的刀片文件。 我使用 jquery 验证器在 js 中设置的验证效果很好,但是当验证正常并且需要发送 ajax 时出现错误: 抛出错误:SyntaxError:JSON 中位置 0 处出现意外标记 jqXHR:[对象对象]
文本状态:解析器错误

我认为来自控制器的 json 传递得不好,但我不知道如何修复它。


问题出在 csrf 令牌未随表单发送。 所以我添加了

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

并与其他表单数据一起发送,一切正常。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 jQuery AJAX 从 Laravel 5 中的联系表单发送电子邮件 的相关文章

随机推荐

  • 如何在Java中使绘制的图像透明

    我让动画在我的 蛇克隆游戏 中发挥作用 但基于图片的问题是图像没有透明度 注意圆形图片的白色背景 编程方面 是否有解决方案能够使这些绘制的图像包含透明度 这是一张包含我的代码和程序输出的图片 附 顺便说一句 我决定粘贴直接链接而不是 IMG
  • Grails 命令对象:如何将 request.JSON 加载到其中?

    Question 有没有办法使用 request JSON 数据进行自动命令对象绑定 在我的 grails 控制器中给出这个简单的 Command 对象 class ProfileCommand int id String companyN
  • 从匿名类调用新定义的方法

    我实例化了一个匿名类的对象 并向其中添加了一个新方法 Date date new Date public void someMethod 我想知道是否可以从外部调用此方法 类似于 date someMethod 好问题 答案是否定的 您不能
  • 2015年如何从lfd安装mod_wsgi

    我如何从 lfd 网站安装 mod wsgi 因为它有轮扩展 每当我搜索如何在 wamp 上安装 mod wsgi 时 资源都会告诉我从该网站安装二进制文件 然后将 mod wsgi so 文件保留在我的 wamp 目录中 lfd 页面上有
  • 如何为nodejs生成调用图?

    跟进如何为给定的 JavaScript 生成调用图 https stackoverflow com questions 10182387 它被关闭了 因为它需要关注 只有一个问题 所以这是我的重点 如何为我的 Node js Javascr
  • Flex:获取自己的 SWF 文件名?

    有没有办法以编程方式确定我的类正在运行的 swf 文件名 Thanks Stage http livedocs adobe com flex 3 langref flash display Stage html has a 加载器信息 ht
  • 如何使用 --timid 标志来覆盖鼻子

    我想使用运行 nosetests with coverage 内德 巴切尔德 Ned Batchelder 的报道模块 http nedbatchelder com code coverage 但将 timid 标志传递给覆盖模块 有没有办
  • 如何轻松编写克隆方法?

    我有一个带有虚拟克隆新方法的基类 class A virtual A cloneNew const return new A 及其衍生物 class A1 public A virtual A1 cloneNew const return
  • 观察 NSUserDefaults 键的值更改

    我对保存在 NSUserdefaults 中的特定键的值变化感兴趣 然而 我所拥有的并不适合我 observeValueForKeyPath 不会被触发 更新 我想我已经发现了这个问题 如果我使用字符串 而不是使用定义的常量 那么它就会被触
  • 如何在 iOS 13 中以编程方式隐藏和显示状态栏?

    我制定了以下隐藏和再次显示状态栏的常用方法 它在 iOS 13 之前工作正常 但当我在 iOS 13 或更高版本的设备上运行它时 我遇到了崩溃 void showStatusBar BOOL show UIView statusBar UI
  • 如何在运输方式(后端)中添加自定义描述字段

    我想在运输方式下的运输区域页面中添加一个自定义字段 它将是一个文本输入 用户将能够添加自定义消息 我将在前端显示该消息 我注意到它将数据保存在wp woocommerce shipping zone methods没有任何额外列来保存数据的
  • Log4Net 或 NLog(或其他记录器)是否有办法以执行堆栈嵌套 XML 或 JSON 格式输出日志?

    Log4Net 或 NLog 或其他记录器 中是否有一种方法可以以执行堆栈嵌套 XML 或 JSON 格式输出日志 这样 if 函数A calls B 7 那个叫C something 它会输出类似以下内容
  • Django Rest Framework 中的视图集“创建”自定义分配值

    想设置一个自定义用户的用户名通过使用输入电子邮件 但在哪里进行自定义分配 在视图中 同时它也接收一个文件 模型 py class CustomUser AbstractUser avatar models ImageField max le
  • 用一条线绘制每年的时间序列数据

    我有一个包含 20 多年股票数据的数据框 Open High Low Close Adj Close Volume Date 2001 01 02 1 062500 1 089286 1 040179 1 062500 0 930781 1
  • 检查类模板是否已实例化?

    有没有一种简单的方法可以查看一个类是否已在翻译单元中实例化 C Primer 中的一个练习询问每个带标签的语句 是否发生实例化 template
  • 简单注入器从命名空间注册所有服务

    我的服务接口的命名空间为Services Interfaces 服务接口的实现有一个命名空间Web UI Services 例如 我有 2 个服务实现 IUserService 需要注册到UserService ICountryServic
  • Delphi:如果我在项目中使用包,为什么“使用调试 DCU”会变得无效?

    我正在构建一个使用 JVCL 插件系统的项目 该系统依赖于运行时 Delphi 包 自从我将它添加到我的项目中后 调试就变成了一场噩梦 因为我不再能够单步跟踪源代码任何 VCL 或 RTL 单元 它们在调试器中都被标记为灰点 当相关函数出现
  • JavaScript 事件时间戳不一致

    我注意到 当我单击站点上的一个元素时 Firebug 在事件处理程序中将 e timeStamp 报告为 9 位数字 例如 866523917 而当我单击另一元素时 Firebug 在该处理程序中将 e timeStamp 报告为一个 16
  • WPF查找控件

    我在 WPF 页面上用过程代码创建了一个网格 现在我想引用该网格 Grid grid Grid This FindName myGridName 不起作用 有想法吗 当您在代码中创建元素时 还需要调用 RegisterName 方法以允许
  • 使用 jQuery AJAX 从 Laravel 5 中的联系表单发送电子邮件

    我在 Laravel Blade 中有联系表 div ul foreach errors gt all as error li error li endforeach ul Form open array route gt contact