99999久久久久久亚洲,欧美人与禽猛交狂配,高清日韩av在线影院,一个人在线高清免费观看,啦啦啦在线视频免费观看www

熱線電話：13121318867

登錄
首頁(yè)精彩閱讀不寫(xiě)一行代碼，如何實(shí)現(xiàn)前端數(shù)據(jù)發(fā)送到郵箱？
不寫(xiě)一行代碼，如何實(shí)現(xiàn)前端數(shù)據(jù)發(fā)送到郵箱？
2022-04-12
收藏

作者：劉早起

來(lái)源：早起Python

經(jīng)常在很多網(wǎng)站上都能看到類(lèi)似的表單信息功能，用戶只需要填寫(xiě)相關(guān)內(nèi)容，點(diǎn)擊提交按鈕，就可以將表單內(nèi)容發(fā)送到管理員郵箱。

恰好最近在折騰我的網(wǎng)站時(shí)，也想添加一個(gè)這樣的功能，但是搜了一圈后，這樣的功能要么是使用Wordpress構(gòu)建的網(wǎng)站，后臺(tái)有現(xiàn)成的功能，要么就是使用php或者C#作為后端實(shí)現(xiàn)的，而我的網(wǎng)站是基于原生H5寫(xiě)的，沒(méi)有相關(guān)后端與數(shù)據(jù)庫(kù)交互，該怎樣實(shí)現(xiàn)呢？

稍加思考后，就會(huì)發(fā)現(xiàn)，本質(zhì)上就是要將點(diǎn)擊按鈕和發(fā)送郵件功能進(jìn)行綁定，那么有沒(méi)有什么簡(jiǎn)單的方法呢？本文就將介紹如何使用Google Apps Script來(lái)實(shí)現(xiàn)網(wǎng)站發(fā)送表單數(shù)據(jù)到郵箱

“后端”操作（Google Apps Script）

雖然本文介紹的方法比較簡(jiǎn)單，無(wú)需寫(xiě)一行代碼，但是仍需要你進(jìn)行一些“后端”的操作，來(lái)將前后按鈕和發(fā)送郵件功能進(jìn)行綁定。

1.制作存儲(chǔ)表格

首先我們需要登陸Google表格并創(chuàng)建一個(gè)用于存儲(chǔ)郵件信息的電子表格，注意需要設(shè)置好你需要的字段

當(dāng)然可以直接打開(kāi)下面的模版來(lái)創(chuàng)建一個(gè)副本 

https://docs.google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy

2.創(chuàng)建腳本

現(xiàn)在，我們進(jìn)入剛剛創(chuàng)建的表格來(lái)啟動(dòng)Apps腳本

3.修改目標(biāo)郵箱

現(xiàn)在我們需要修改剛剛打開(kāi)的js文件中的參數(shù)來(lái)指定發(fā)送郵箱

注如果你不修改這行參數(shù)的話，只要?jiǎng)e人進(jìn)入你的網(wǎng)站，F(xiàn)12修改相關(guān)參數(shù)即可將郵件數(shù)據(jù)發(fā)送至他的郵箱！

當(dāng)然，你也可以在不在這里指定發(fā)送郵箱，反之將這個(gè)關(guān)鍵詞做為表單選項(xiàng)，來(lái)在填寫(xiě)時(shí)指定！

修改之后，保存即可。

4.發(fā)布 Web 程序

現(xiàn)在，我們需要發(fā)布并部署腳本

需要注意的是，要將權(quán)限設(shè)置為所有人

5.授權(quán)腳本發(fā)送郵件

現(xiàn)在，我們已經(jīng)創(chuàng)建了一個(gè)能夠發(fā)送郵件的腳本，下一步需要對(duì)它進(jìn)行授權(quán)

點(diǎn)擊后按照提示進(jìn)行授權(quán)

最后，你會(huì)得到一串網(wǎng)站，將它復(fù)制保存

到這里，我們“后端”操作就完成了！雖然步驟有些復(fù)雜，但是比 php 或者 C# 等代碼實(shí)現(xiàn)還是要簡(jiǎn)單很多。

前端操作

6.修改 form 標(biāo)簽參數(shù)

現(xiàn)在，可以打開(kāi)我們表單所在的html文件，按照如下提示進(jìn)行修改

  • 每個(gè)表單元素的name屬性都必須與Google表格中的列名相同
  • 表格class必須是gform，即<form class="gform">
  • action修改為剛剛復(fù)制的鏈接

7. 發(fā)送表單數(shù)據(jù)

現(xiàn)在，任何人都可以填寫(xiě)對(duì)應(yīng)表格內(nèi)容，并點(diǎn)擊發(fā)送

你的 Google 表格中就會(huì)增加一條數(shù)據(jù)

并且你的郵箱中也會(huì)收到一封新增內(nèi)容的郵件

至此，我們僅通過(guò) Google 表格與簡(jiǎn)單的腳本修改就完成的 html 表單數(shù)據(jù)發(fā)送至郵箱！

8.（可選）使用 Ajax

雖然我們的需求已經(jīng)實(shí)現(xiàn)，但是在剛剛點(diǎn)完發(fā)送之后，會(huì)跳轉(zhuǎn)到一個(gè)新的頁(yè)面

為了頁(yè)面不修改，我們需要使用AJAX提交表單，首先需要從下面的鏈接中下載對(duì)應(yīng)的js文件到項(xiàng)目目錄 

https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/master/form-submission-handler.js

并將下方代碼添加到網(wǎng)頁(yè)文件中 

<script data-cfasync="false" type="text/javascript" src="form-submission-handler.js"></script>

刷新頁(yè)面，現(xiàn)在我們可以直接在當(dāng)前頁(yè)面提交表單！

9.（可選）添加感謝

如果你想在用戶提交表單后發(fā)送一段感謝語(yǔ)，可以將下面的內(nèi)容插入在form標(biāo)簽結(jié)束之前 

<div style="display:none" class="thankyou_message"> <!-- 修改下方內(nèi)容 --> <h2><em>Thanks</em> for contacting us! We will get back to you soon! </h2> </div>

當(dāng)然你也可以使用CSS、JS來(lái)讓你的表單更加酷炫，但這不是本文要討論的主要內(nèi)容。

好了，至此，你應(yīng)該學(xué)會(huì)如何利用 Google 表格來(lái)快速的實(shí)現(xiàn)前端數(shù)據(jù)發(fā)送到指定郵箱，如果你對(duì)本文的內(nèi)容感興趣，不妨親自動(dòng)手嘗試一下～

數(shù)據(jù)分析咨詢(xún)請(qǐng)掃描二維碼

若不方便掃碼，搜微信號(hào)：CDAshujufenxi

數(shù)據(jù)分析師資訊
更多

OK
客服在線
立即咨詢(xún)
客服在線
立即咨詢(xún)
') } function initGt() { var handler = function (captchaObj) { captchaObj.appendTo('#captcha'); captchaObj.onReady(function () { $("#wait").hide(); }).onSuccess(function(){ $('.getcheckcode').removeClass('dis'); $('.getcheckcode').trigger('click'); }); window.captchaObj = captchaObj; }; $('#captcha').show(); $.ajax({ url: "/login/gtstart?t=" + (new Date()).getTime(), // 加隨機(jī)數(shù)防止緩存 type: "get", dataType: "json", success: function (data) { $('#text').hide(); $('#wait').show(); // 調(diào)用 initGeetest 進(jìn)行初始化 // 參數(shù)1：配置參數(shù) // 參數(shù)2：回調(diào)，回調(diào)的第一個(gè)參數(shù)驗(yàn)證碼對(duì)象，之后可以使用它調(diào)用相應(yīng)的接口 initGeetest({ // 以下 4 個(gè)配置參數(shù)為必須，不能缺少 gt: data.gt, challenge: data.challenge, offline: !data.success, // 表示用戶后臺(tái)檢測(cè)極驗(yàn)服務(wù)器是否宕機(jī) new_captcha: data.new_captcha, // 用于宕機(jī)時(shí)表示是新驗(yàn)證碼的宕機(jī) product: "float", // 產(chǎn)品形式，包括：float，popup width: "280px", https: true // 更多配置參數(shù)說(shuō)明請(qǐng)參見(jiàn)：http://docs.geetest.com/install/client/web-front/ }, handler); } }); } function codeCutdown() { if(_wait == 0){ //倒計(jì)時(shí)完成 $(".getcheckcode").removeClass('dis').html("重新獲取"); }else{ $(".getcheckcode").addClass('dis').html("重新獲取("+_wait+"s)"); _wait--; setTimeout(function () { codeCutdown(); },1000); } } function inputValidate(ele,telInput) { var oInput = ele; var inputVal = oInput.val(); var oType = ele.attr('data-type'); var oEtag = $('#etag').val(); var oErr = oInput.closest('.form_box').next('.err_txt'); var empTxt = '請(qǐng)輸入'+oInput.attr('placeholder')+'！'; var errTxt = '請(qǐng)輸入正確的'+oInput.attr('placeholder')+'！'; var pattern; if(inputVal==""){ if(!telInput){ errFun(oErr,empTxt); } return false; }else { switch (oType){ case 'login_mobile': pattern = /^1[3456789]\d{9}$/; if(inputVal.length==11) { $.ajax({ url: '/login/checkmobile', type: "post", dataType: "json", data: { mobile: inputVal, etag: oEtag, page_ur: window.location.href, page_referer: document.referrer }, success: function (data) { } }); } break; case 'login_yzm': pattern = /^\d{6}$/; break; } if(oType=='login_mobile'){ } if(!!validateFun(pattern,inputVal)){ errFun(oErr,'') if(telInput){ $('.getcheckcode').removeClass('dis'); } }else { if(!telInput) { errFun(oErr, errTxt); }else { $('.getcheckcode').addClass('dis'); } return false; } } return true; } function errFun(obj,msg) { obj.html(msg); if(msg==''){ $('.login_submit').removeClass('dis'); }else { $('.login_submit').addClass('dis'); } } function validateFun(pat,val) { return pat.test(val); }