iT邦幫忙

2023 iThome 鐵人賽

DAY 17
0
Modern Web

Google Apps Script 整合運用系列 第 17

前後端數據傳輸和互動

  • 分享至 

  • xImage
  •  

google.script.run

google.script.run 是在Google Apps Script中用於客戶端和服務端之間通信的JavaScript API。它的主要用途是允許在Web應用程序的前端(客戶端)和Google Apps Script腳本的後端(服務端)之間進行數據傳輸和互動。以下是一些常見的用途:

  1. 調用Google Apps Script函數: 通過google.script.run,您可以從前端JavaScript代碼調用Google Apps Script中的函數。這使得可以從網頁上的按鈕單擊或其他用戶操作觸發腳本的執行。
// 在前端JavaScript代碼中調用Google Apps Script函數
google.script.run.myFunction();

  1. 將數據從前端發送到後端: 您可以使用google.script.run將前端表單或其他數據傳遞給Google Apps Script後端,以便處理和存儲數據。
// 使用回調處理從Google Apps Script後端獲取的數據
google.script.run.withSuccessHandler(function(data) {
  // 在成功時處理數據
  console.log("成功獲取數據:", data);
}).getData();

  1. 總之,google.script.run 是在Google Apps Script Web應用程序中實現前端和後端之間通信的關鍵工具,它使得在應用程序中處理數據、觸發腳本功能和實現交互性變得更加容易。它通常與HTML和JavaScript結合使用,以實現動態Web應用程序的功能。

客戶表單送至後台儲存

  1. 取得表單值
  2. 將值送至後台儲存並回傳畫面
    google.script.run.withSuccessHandler(回傳畫面函式).myFunction(formData)
    回傳畫面函式:onSuccess
    myFunction(formData):後台函式
  3. onSuccess
function onSuccess(html){
  //html 為回傳值
  let div = document.getElementById('show');
  div.innerHTML = html; 
  
  setIdAttribute('main-container','d-none');//關閉主畫面
  setIdAttribute('show','my-5');            //開啟等待畫面
}
  1. myFunction(formData):調用後台函式
    我們希望這個函式名稱可以由 form_custom()傳來要調用的函式
    可以借助 google 這個全域變數
    後台設定 global['insert_op'] = 'set_data_custom';
    樣版:
  let inset_op = '<?= global.insert_op ?>';
   google.script.run.withSuccessHandler(onSuccess)[insert_op](formData);

insert_op 即等於 .myFunction(formData)
5. 如果上面這裡都能理解,那麼我們將改造 set_data_custom()函式
6. 開發步驟,我會從後面處理至前面

客戶資料儲存函式

剛開始時 set_data_custom() 是將測試資料寫死在裡面(陣列),現在需從參數傳入 formData 物件


上一篇
驗證規則
下一篇
將表單送出資料寫入
系列文
Google Apps Script 整合運用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言