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

熱線電話：13121318867

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

作者：劉早起

來源：早起Python

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

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

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

“后端”操作（Google Apps Script）

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

1.制作存儲表格

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

當然可以直接打開下面的模版來創(chuàng)建一個副本 

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

2.創(chuàng)建腳本

現(xiàn)在，我們進入剛剛創(chuàng)建的表格來啟動Apps腳本

3.修改目標郵箱

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

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

當然，你也可以在不在這里指定發(fā)送郵箱，反之將這個關鍵詞做為表單選項，來在填寫時指定！

修改之后，保存即可。

4.發(fā)布 Web 程序

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

需要注意的是，要將權限設置為所有人

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

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

點擊后按照提示進行授權

最后，你會得到一串網站，將它復制保存

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

前端操作

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

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

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

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

現(xiàn)在，任何人都可以填寫對應表格內容，并點擊發(fā)送

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

并且你的郵箱中也會收到一封新增內容的郵件

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

8.（可選）使用 Ajax

雖然我們的需求已經實現(xiàn)，但是在剛剛點完發(fā)送之后，會跳轉到一個新的頁面

為了頁面不修改，我們需要使用AJAX提交表單，首先需要從下面的鏈接中下載對應的js文件到項目目錄 

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

并將下方代碼添加到網頁文件中 

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

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

9.（可選）添加感謝

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

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

當然你也可以使用CSS、JS來讓你的表單更加酷炫，但這不是本文要討論的主要內容。

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

數(shù)據(jù)分析咨詢請掃描二維碼

若不方便掃碼，搜微信號：CDAshujufenxi

數(shù)據(jù)分析師考試動態(tài)
數(shù)據(jù)分析師資訊
更多

OK
客服在線
立即咨詢
客服在線
立即咨詢
') } 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(), // 加隨機數(shù)防止緩存 type: "get", dataType: "json", success: function (data) { $('#text').hide(); $('#wait').show(); // 調用 initGeetest 進行初始化 // 參數(shù)1：配置參數(shù) // 參數(shù)2：回調，回調的第一個參數(shù)驗證碼對象，之后可以使用它調用相應的接口 initGeetest({ // 以下 4 個配置參數(shù)為必須，不能缺少 gt: data.gt, challenge: data.challenge, offline: !data.success, // 表示用戶后臺檢測極驗服務器是否宕機 new_captcha: data.new_captcha, // 用于宕機時表示是新驗證碼的宕機 product: "float", // 產品形式，包括：float，popup width: "280px", https: true // 更多配置參數(shù)說明請參見：http://docs.geetest.com/install/client/web-front/ }, handler); } }); } function codeCutdown() { if(_wait == 0){ //倒計時完成 $(".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 = '請輸入'+oInput.attr('placeholder')+'！'; var errTxt = '請輸入正確的'+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); }