使用JavaScript通过前端发送电子邮件_javascript技巧

来源:脚本之家  责任编辑:小易  

其实要不是服务器控件的话,js中是没有前事件的,但是你可以在click事件中进行判断,分为两步甚至多部,如果上一步完成成功,就继续执行下一步,否则不执行下一步。function btnClick(){ var 事件1=something1();if(事件1){ something2();} };www.zgxue.com防采集请勿采集本网。

你为什么不通过发送电子邮件传输信息?

前事件,是说点击前吗?如果是这样的话,在按钮那里绑定一个鼠标按下事件就可以onmousedown

不使用数据库就能接收到传入的消息,绝对是最佳选择,也是最方便用户的选择。但问题来了—如何实现呢?你可能认为需要使用某种后端语言。

把你要在click前的代码也写在click事件里面,如果不符合,下面加一行return就可以了

实际上,你不必使用任何如 php 或 python 这种后端语言,你甚至不需要用到 node.js!

不用,javascript只是一种脚本语言,是一种弱类型的语言,变量在使用前不必声明类型,由解释器根据上下文来判断数据类型,var也不是必须的。

你需要的就是一个简单的EmailJS库。

想在这个事件里面实现什么功能。直接在onclick的方法里面触发不行吗?

本文将介绍下面两个重要功能: 配置 emailjs 帐户 使用 JS 发送电子邮件

一般有两钟方法: 一,将用户名输入框获得焦点:document.getElementById(\"txtName\").focus();二,设置一个锚记点,然后链接到此锚记点:window.location=\"#userContent;还有问题可以HI我~

请注意,在我的项目中,我使用了 gulp 和 webpack,我在 src 文件夹存放源码,dist 存放最终发布版本的代码。

我将分 5 个步骤向你展示如何从头开始构建电子邮件发送器。

步骤1-用 HTML 创建表单

首先需要创建一个 HTML 表单。你不必放置像 required 或 max 这种验证属性,因为稍后,preventDefault() 函数将在你的提交事件上运行,它会让这些属性的处理失效。

表单中最重要的是为每个输入放置 name 属性,后面会用到。

我的非常简单的表单是这样的:

src/html/index.html

<form class="form"><input name='name' type="text" placeholder="Your name..."class="form__input" /><input name='topic' type="text" placeholder="Topic..."class="form__input" /><textarea name='message' type="text" placeholder="Your Message..."class="form__input"></textarea><input type="submit" value="send"class="form__input form__input--button"> </form>

步骤2-注册成为 email 用户

要配置你的电子邮件,你必须注册电子邮件服务。别担心—使用这个网站非常方便和省时。

登入后,系统会询问你的电子邮件服务,它位于个人电子邮件服务区(personal email service)。在我的例子中,我选择了 gmail。

然后,你需要连接你的 gmail 帐户。这将用来发送电子邮件给你客户。例如,如果你关联了 xyz@gmail.com 账户,你后续发送的邮件都将从这个邮箱发出。所以不要担心“ Send email on your behalf” 这个授权信息—这正是你需要的!

连接完 gmail 账户后,点击添加服务(add service)按钮。

步骤3-创建邮件模板

如果你已经成功连接了你的 gmail 账户,你现在应该在信息中心中。现在需要创建电子邮件模板了。

切换到电子邮件模板卡,并单击创建一个新的模板(create a new template)。界面非常友好,所以创建模板不会有任何问题。

你可以选择模板的名称和 ID。我称之为“我的神奇模板(my_amazing_template)”。

接下来,你必须指定邮件的内容。

模板的变量值来自 input 中的 `name` 属性。你已将变量插入`{{{}}}`符号中。

不要忘记在“收件人”部分 (右侧) 添加电子邮件地址。你的电子邮件将被发送到该电子邮件地址上。截图中的收件人邮箱是我自己的公司邮箱。

这是我的简单模板,它使用来自 HTML 表单里的 3 个变量。我还指定了接收电子邮件的主题。

步骤4-保存 API 密钥

这部分没什么特别的。Emailjs 共享授权 API 密钥,将在发送电子邮件时使用。当然,放这些钥匙最好的地方是`.env` 配置。但是因为我使用的是简单的静态文件,我不想使用服务器配置,所以我将它们保存在 apikeys 文件中,然后再将它们导入。 你的 USER_ID 位于 Account > API Keys 菜单下。 TEMPLATE_ID 位于模板的标题下面。

这是我基于不存在的 keyssrc / js / apikeys. js 的示例配置.

src/js/apikeys.js

export default { USER_ID :'user_DPUd-rest-of-my-id', TEMPLATE_ID:'my_amazing_template'}

如果需要将源码发布到 GITHUB,不要忘记将 APIKEYS 文件添加到 .GITIGNORE文件中

步骤5-发送电子邮件

现在是该项目最后也是最重要的部分的了。现在我们必须使用 javascript 发送电子邮件。

首先,你必须下载 emailjs 包。

npm i emails-com

然后,转到 js 文件,导入库和 apikeys。

src/js/main.js

import emailjs from 'emailjs-com'import apiKeys from './apikeys'

现在是编写发送电子邮件功能的时候了

src/js/main.js

const sendEmail = e = >{ e.preventDefault() emailjs.sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID).then(result = >{ console.log(result.text) }, error = >{ console.log(error.text) })}

sendForm 函数有4个参数: 你的电子邮件的 ID,在这里: TEMPLATE_ID 来自 apikey 文件, 事件对象来自你的表单提交 USER_ID 来自 apikey 文件,

最后,查找表单并添加提交事件监听器:

src/js/main.js

const form = document.querySelector('.form')form.addEventListener('submit',sendEmail)

正如我前面提到的,由于 `preventDefault()` 函数,属性验证将无法工作。你必须使用 JS 自己进行验证和清除输入。

以上就是全部内容,接下来让我们测试一下。

填写页面上的表单并发送。

我收到电子邮件,内容正是根据我们的模板和表单数据渲染出来的。

通过上图可以看出,所有的变量的值都填充到了正确的位置上。

总结

通过本文的介绍你会发现用 JS 发送邮件并非难事。

使用 emailjs,你可以简单的方式发送电子邮件。

!DOCTYPEhtml>title>()">点我document.addEventListener('click',myFilter,true);function myFilter(em){var target=em.type;if(target='click'){console.log("run click");}}function myClick(){console.log("click");}内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript email邮箱/邮件地址的正则表达式及分析
  • nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
  • node.js发送邮件email的方法详解
  • 利用node.js实现邮件发送功能
  • js中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
  • js正则表达式验证邮件地址
  • 纯javascript实现自动发送邮件
  • node.js使用nodemailer发送邮件实例
  • javascript自然分类法算法实现代码
  • avalon中文长字符截取、关键字符隐藏、自定义过滤器
  • javascript实现省市联动效果
  • javascript内置对象math,global功能与用法实例分析
  • javascript提高网站性能优化的建议(二)
  • 详解vue-cli+es6引入es5写的js(两种方法)
  • javascript使用百度地图api和html5特性获取浏览器位置
  • cookie 最近浏览记录(中文escape转码)具体实现
  • javascript中三种异步上传文件方式
  • 微信小程序 点击切换样式scroll-view实现代码实例
  • 如何使用javascript实现click的前事件
  • 如何使用javascript实现click的前事件
  • 如何使用javascript实现click的前事件
  • 如何使用javascript实现click的前事件
  • 如何使用javascript实现click的前事件
  • 如何使用javascript实现click的前事件
  • javascript中在使用任何变量之前必须先使用var声明吗
  • 如何使用javascript实现click的前事件
  • javascript 使用 alert后,如何返回提交前的网页位置,
  • 在HTML中嵌入JavaScript应该使用的标记是什么
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript email邮箱/邮件地址的正则表达式及分析nodejs模块nodemailer基本使用-邮件发送示例(支持附件)node.js发送邮件email的方法详解利用node.js实现邮件发送功能js中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端js正则表达式验证邮件地址纯javascript实现自动发送邮件node.js使用nodemailer发送邮件实例javascript自然分类法算法实现代码avalon中文长字符截取、关键字符隐藏、自定义过滤器javascript实现省市联动效果javascript内置对象math,global功能与用法实例分析javascript提高网站性能优化的建议(二)详解vue-cli+es6引入es5写的js(两种方法)javascript使用百度地图api和html5特性获取浏览器位置cookie 最近浏览记录(中文escape转码)具体实现javascript中三种异步上传文件方式微信小程序 点击切换样式scroll-view实现代码实例js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包js实现的二分查找算法实例javascript在ie或firefox下获取鼠标位置的bootstrap组件系列之福利篇几款好用的组件javascript图片预览和上传(兼容ie)javascript中的遍历详解(多种遍历)webpack 打包压缩js和css的方法示例javascript清空table表格的方法javascript的object.defineproperty详解javascript生成二维码图片小结对google个性主页的拖拽效果的js的完整注
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved