想要做一個倒數計時計，從後端 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.在抓取資料庫的同時，前端網頁已經接收到上次輸入所得出的結果，顯示出來的是上次請求
