【ajax】ajax jsonp的方式對.gs送出請求，並防止後跳轉頁面

之前的問題是用js送出請求（偽表單）後寫入試算表，頁面會自動跳轉，所以選用ajax success的方式防止跳轉

後端google app script參考

 function doGet(e) {
   var parameter = e.parameter;
   var callback = e.parameter.callback;
   var name = parameter.name;
   var result = "";

   try {
    result = "Hello " + name;
   } catch (f) {
    result = "Error: " + f.toString();
   }

   result = JSON.stringify({
    "result": result
   });

   return ContentService
   .createTextOutput(callback + "(" + result + ")")//對應cbfn(e)的e
   .setMimeType(ContentService.MimeType.JAVASCRIPT);
 }

前端ajax get

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script>    function cbfn(e) {//要帶參數e作為預設的資料接收參數
     console.log(e.result);
     document.getElementById('demo').innerHTML=e;
   }
   // Make an AJAX call to Google Script
   function callGoogleScript() {
     var url = "https://script.google.com/macros/s/AKfycbyd4ECD5IyPBpWAElWwc5l2pwZ7B_wJEEYWQzk7sy8PHH-KywI/exec";
     var name = "Amit Agarwal"
     name = JSON.stringify(name);//轉成字串傳送
     var request = jQuery.ajax({
     crossDomain: true,
     url: url,
     type: "GET",
     // type: "POST", //還是會以get傳遞
     data:{
       "name":name
     },
     jsonpCallback:'cbfn',
     dataType: "jsonp"
     });

  }
   callGoogleScript();

</script>

操作以後可以發現，確實使用console可以看到有資料的接收。但是這邊有一個小問題是jsonp格式只能使用GET的方式傳送，會有資料長度的問題。

【.gs】克服ajax跨網域抓取雲端試算表，出現401的問題

想要做一個倒數計時計，從後端 google spreadsheet 抓取資料，這樣以後就只要更新google spreadsheet，前台就會自己更新了。
思考脈絡:統一更新資料庫，並且在跨網域的頁面上抓取數字
∴ 前端發出請求(.js)>輸入試算表中(.gs)>試算表中運算>回傳抓取儲存格內容(.gs)>前端修改顯示內容(.js)
重點:使用jsonp方式克服上一篇ajax跨網域401的問題

前端HTML

<body> <table>
<tr>
<td id='query'>華南銀行</td>
<td class="outputblock"></td>
</tr>
<tr>
<td id='query'>彰化銀行</td>
<td class="outputblock"></td>
</tr>
</table>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script>
// Make an AJAX call to Google Script
function callGoogleScript() {
var url = "https://script.google.com/macros/s/AKfycbzSM0wr5riuOBvTxjd8uzhAQxl5cfb5iM7r_P3uHcc6My1ePg/exec?callback=ctrlq&name=";
console.log(document.getElementById('query').innerHTML);
var name = "彰化銀行";//查詢日期
var request = jQuery.ajax({
crossDomain: true,
url: url + encodeURIComponent(name),
method: "GET",
dataType: "jsonp"
});
}

// print the returned data
function ctrlq(e) {
console.log(e.result);
var outputblock = document.getElementsByClassName('outputblock')[0];//如果執行多次改輸出位置
outputblock.innerHTML = e.result + "天";
}
callGoogleScript();
</script>
</body>

google script後端

function countday(find){ var spreadsheet = SpreadsheetApp.openById('1sLyb9MUEI_9_zx6nYnXgVUxY1b3yiVvRonjPX-WtP5I'); var sheet = spreadsheet.getSheets()[0]; var outputrange = sheet.getRange(2, 2); var findrange = sheet.getRange(1, 3); var value = outputrange.getValue(); findrange.setValue(find); return value; } function doGet(e) { var parameter = e.parameter; var callback = parameter.callback; var name = parameter.name; var result = ""; try { result = countday(name); } catch (f) { result = "Error: " + f.toString(); } result = JSON.stringify({ "result": result }); return ContentService .createTextOutput(callback + "(" + result + ")") .setMimeType(ContentService.MimeType.JAVASCRIPT); }

發現問題: 1.多個網域"同時"寫入google spread sheet的時候會有些沒有執行到 2.在抓取資料庫的同時，前端網頁已經接收到上次輸入所得出的結果，顯示出來的是上次請求