summer dreamer

全新的 香港中文版 WordPress 網站!

Note

Google Sheets

Ajax google-sheets

Step1:建立 Google Sheets

於第一列填入表格的表頭

Step2:進入 Google Sheets 指令碼編輯器

接著寫入 Function doGet,如下程式碼所示,

function doGet(e) {
  //取得參數
  var params = e.parameter; 
  var name = params.name;
  var phone = params.phone;
  var demand = params.demand;
 
  //sheet資訊
  var SpreadSheet = SpreadsheetApp.openById("請輸入自己的sheet id");
  var Sheet = SpreadSheet.getSheets()[0];
  var LastRow = Sheet.getLastRow();

  //存入資訊
  Sheet.getRange(LastRow+1, 1).setValue(name);
  Sheet.getRange(LastRow+1, 2).setValue(phone);
  Sheet.getRange(LastRow+1, 3).setValue(demand);
  
  //回傳資訊
  return ContentService.createTextOutput("成功");
}
  • 程式碼說明
  1. doGet 代表 API method 爲 get
  2. 取得參數:傳入的全部參數以 e.parameter 取得,再分別以其他變數存放個別參數
  3. Sheet 資訊:程式碼中的 “請輸入自己的 sheet id”,請複製你的 Google Sheet 網址列 https://docs.google.com/spreadsheets/d/ 以後至 edit 中間的代碼。SpreadSheet.getSheets()[0]; 取得要存入的試算表的第一張試算表。Sheet.getLastRow(); 取得該張試算表中,最後一列有值的列數。
  4. 存入資訊:Sheet.getRange(LastRow+1, 1).setValue(name); 將資料存入最後有值的下一列,第一欄。其他以此類推。
  5. 回傳資訊:return ContentService.createTextOutput(“成功”); 存入過程無誤,回傳成功資訊。若需要其他驗證條件也可以寫 if 條件判斷,並於失敗時,回傳失敗資訊。

Step3:部署

選擇發佈 -> 部署爲網路應用程式,看到以下畫面,將具有應用程式存取權的使用者改爲 “任何人,甚至是匿名使用者“ ,點選部署。

點選核對權限 -> 選擇自己的帳戶 -> 進階 -> 前往 -> 允許,接著就會看到以下畫面,網路應用程式網址即爲 Call API 的 URL。

Step4:利用 Ajax call API 存入資料

爲畫面上的 button 加上 click 監聽事件,並利用 ajax 發送 API,其中 url 請填入 step3 所取得的 API URL。

let sendButton = document.querySelector('button');

function send() {
  let name = document.querySelector('#nameValue').value;
  let phone = document.querySelector('#phoneValue').value;
  let demand = document.querySelector('#demandValue').value;
  $.ajax({
    url: "填入google sheet api url",
    data: {
        "name": name,
        "phone": phone,
        "demand": demand
    },
    success: function(response) {
      if(response == "成功"){
        alert("成功");
      }
    },
  });
};

sendButton.addEventListener('click', send);

Comments are Closed

Theme by Anders Norén