大家好，如果您还对js获取网站的源码分享不太了解，没有关系，今天就由本站为大家分享js获取网站的源码分享的知识，包括js如何获取网页传过来的参数的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
作者|MateuszIwaniuk
译者|明明如月，责编|夕颜
出品|CSDN（ID：CSDNnews）
文章配套代码:https://github.com/iwaniukooo11/email-sender
现在，即使是创建最基本的网站，程序员也必须使用现代的功能和技术。甚至像为你的朋友创建简单的投资组合这样的基本项目也可能涉及到一些问题，比如从联系人表单接收数据。有很多方法可以读取这些数据。你可以将表单与数据库连接起来，然后从数据库中读取传入的消息来实现功能，但这样做会给不懂技术的客户造成困难。
你为什么不通过发送电子邮件传输信息？
不使用数据库就能接收到传入的消息，绝对是最佳选择，也是最方便用户的选择。但问题来了—如何实现呢？你可能认为需要使用某种后端语言。
实际上，你不必使用任何如php或python这种后端语言，你甚至不需要用到node.js！你需要的就是一个简单的EmailJS库。
本文将介绍下面两个重要功能:
配置emailjs帐户
使用JS发送电子邮件
请注意，在我的项目中，我使用了gulp和webpack，我在src文件夹存放源码，dist存放最终发布版本的代码。
我将分5个步骤向你展示如何从头开始构建电子邮件发送器。
步骤1-用HTML创建表单
首先需要创建一个HTML表单。你不必放置像required或max这种验证属性，因为稍后，preventDefault函数将在你的提交事件上运行，它会让这些属性的处理失效。
表单中最重要的是为每个输入放置name属性，后面会用到。
我的非常简单的表单是这样的:
src/html/index.html
<formclass=”form”><inputname=’name’type=”text”placeholder=”Yourname…”class=”form__input”/><inputname=’topic’type=”text”placeholder=”Topic…”class=”form__input”/><textareaname=’message’type=”text”placeholder=”YourMessage…”class=”form__input”></textarea><inputtype=”submit”value=”send”class=”form__inputform__input–button”></form>
步骤2-注册成为email用户
要配置你的电子邮件，你必须注册电子邮件服务。别担心—使用这个网站非常方便和省时。
登入后，系统会询问你的电子邮件服务，它位于个人电子邮件服务区（personalemailservice）。在我的例子中，我选择了gmail。
然后，你需要连接你的gmail帐户。这将用来发送电子邮件给你客户。例如，如果你关联了xyz@gmail.com账户，你后续发送的邮件都将从这个邮箱发出。所以不要担心“Sendemailonyourbehalf”这个授权信息—这正是你需要的！
连接完gmail账户后，点击添加服务（addservice）按钮。
步骤3-创建邮件模板
如果你已经成功连接了你的gmail账户，你现在应该在信息中心中。现在需要创建电子邮件模板了。
切换到电子邮件模板卡，并单击创建一个新的模板（createanewtemplate）。界面非常友好，所以创建模板不会有任何问题。
你可以选择模板的名称和ID。我称之为“我的神奇模板（my_amazing_template）”。
接下来，你必须指定邮件的内容。
模板的变量值来自input中的`name`属性。你已将变量插入`{{{}}}`符号中。
不要忘记在“收件人”部分(右侧)添加电子邮件地址。你的电子邮件将被发送到该电子邮件地址上。截图中的收件人邮箱是我自己的公司邮箱。
这是我的简单模板，它使用来自HTML表单里的3个变量。我还指定了接收电子邮件的主题。
步骤4-保存API密钥
这部分没什么特别的。Emailjs共享授权API密钥，将在发送电子邮件时使用。当然，放这些钥匙最好的地方是`.env`配置。但是因为我使用的是简单的静态文件，我不想使用服务器配置，所以我将它们保存在apikeys文件中，然后再将它们导入。
你的USER_ID位于Account>APIKeys菜单下。
TEMPLATE_ID位于模板的标题下面。
这是我基于不存在的keyssrc/js/apikeys.js的示例配置.
src/js/apikeys.js
exportdefault{USER_ID:’user_DPUd-rest-of-my-id’,TEMPLATE_ID:’my_amazing_template’}
如果需要将源码发布到GITHUB，不要忘记将APIKEYS文件添加到.GITIGNORE文件中
步骤5-发送电子邮件
现在是该项目最后也是最重要的部分的了。现在我们必须使用javascript发送电子邮件。
首先，你必须下载emailjs包。
npmiemails-com
然后，转到js文件，导入库和apikeys。
src/js/main.js
importemailjsfrom’emailjs-com’importapiKeysfrom’./apikeys’
现在是编写发送电子邮件功能的时候了
src/js/main.js
constsendEmail=e=>{e.preventDefaultemailjs.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
constform=document.querySelector(‘.form’)form.addEventListener(‘submit’,sendEmail)
正如我前面提到的，由于`preventDefault`函数，属性验证将无法工作。你必须使用JS自己进行验证和清除输入。
以上就是全部内容，接下来让我们测试一下。
填写页面上的表单并发送。
我收到电子邮件，内容正是根据我们的模板和表单数据渲染出来的。
通过上图可以看出，所有的变量的值都填充到了正确的位置上。
总结
通过本文的介绍你会发现用JS发送邮件并非难事。
使用emailjs，你可以简单的方式发送电子邮件。
我相信你未来的用户会很高兴收到来自他们网页上表单填写数据的t邮件，相信本文对你有帮助。
这篇文章的配套代码在这里:https://github.com/iwaniukooo11/email-sender
原文链接：
https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d
本文为CSDN翻译文章，转载请注明出处。
?我们想研发一个机器学习框架，6个月后失败了
?生产型机器学习已经没那么困难了？
?视频|你不知道的”开源”60年秘史
?GitHub标星10,000+，Apache项目ShardingSphere的开源之路
?阿里技术专家告诉你，如何画出优秀的架构图？
?加拿大API平台如何做到30%为中国明星项目？创业老兵这样说……
如果你还想了解更多这方面的信息，记得收藏关注本站。