(Pic from: veryicon.com)2022/5/25 公告:2021 年中 Google 試算表改版後本篇方法已失效,請改用「操作 Sheet API 讀取 Google 試算表取得 JSON 資料」。
由於本文為更新版的內容,主要是修正舊文的參數,關於重要的原理、Json 資料格式、使用要點等內容便不再重複,請直接參考舊文「利用 Google 問卷(試算表)當小型資料庫__(二)讀取、儲存資料庫」,以下直接利用「上一篇」 取得的參數來進行資料庫的讀取與寫入。
由於 Google 產品常常改版,每隔一陣子就會有些許變動,或許本文的操作畫面會跟實際畫面稍許不同,不過只要理解文章所要闡述的原理,相信可以自行對照一下、並找出正確的執行方法。因此本文的操作內容不再隨 Google 改版而更新,因為只要了解原理,那麼要實現利用 Google 試算表當小型資料庫是沒問題的。
二、讀取資料庫
1. 轉換為 Json 格式:
根據「上一篇」→「一、製作資料庫」→ 第 14 個步驟,我們得到「https://spreadsheets.google.com/feeds/list/0AikclfTTti-0dGFNMHRKdFVIaG12eE9wbUdkS1NYYXc/od6/public/basic?alt=rss」這樣的字串。
將這一行改為以下字串:
https://spreadsheets.google.com/feeds/list/0AikclfTTti-0dGFNMHRKdFVIaG12eE9wbUdkS1NYYXc/od6/public/values?alt=json-in-script
2. 分析 Json 內容:
將改過的字串貼到網址列,從瀏覽器顯示的 Json 格式資料,依照「舊版的方法」,問卷問題的資料將儲存在以下的位置:
json.feed.entry[0].gsx$問題標題.$t
在「上一篇」中我們設定了兩個問題標題 "Q1" 及 "Q2",因此這兩個問題的資料將分別儲存在:
json.feed.entry[0].gsx$q1.$t
json.feed.entry[0].gsx$q2.$t
請注意標題 "Q1" 及 "Q2" 都被自動轉換成小寫 "q1" 及 "q2" 了,因此之後使用 javascript 讀取資料時也必須用小寫的參數。
3. 印出資料庫內容:
接下來使用以下簡單的 javascript 就能呼叫試算表資料轉換的 Json 格式,呈現在自己的網頁:
B:設定處理 Json 的函數名為「test」,括弧內的參數建議設定為 json。
C:變數「a」抓出資料庫內儲存的資料組數。
E~F:設定變數「b、c」抓出每筆資料的儲存欄位
G:印出每筆資料
K:最重要的一行,綠色字串就是步驟 1 我們更改後的字串;紅色字串代表把抓出來的 Json 格式資料傳送給要執行的函數;藍色字串必須填上處理 Json 資料的函數,就是 B 行的 test 函數。
可以開一篇文章貼上程式碼看看跑出來的結果。
三、寫入資料庫
1. 利用網址傳送資料:我們在「上一篇」→ 第 7 個步驟得到的字串「https://docs.google.com/forms/d/1iVpKF_oArILEsQmjar5Ds4Zd7IRiurx6osjuiSTltbA/formResponse」
再配合第 8 個步驟得到的字串──
第一筆資料:entry.146652736
第二筆資料:entry.2142316379
假設我們第一筆資料填入 "WFU BLOG",第二筆資料填入 "http://wayne-fu.blogspot.com",那麼可組合成以下字串──
https://docs.google.com/forms/d/1iVpKF_oArILEsQmjar5Ds4Zd7IRiurx6osjuiSTltbA/formResponse?entry.146652736=WFU BLOG&entry.2142316379=http://wayne-fu.blogspot.com&submit=Submit
注意以上綠字的各種符號,網址填入參數必須以「?」問號開始,每筆參數、資料以「&」符號隔開,參數與資料之間使用「=」等號,最後填入「&submit=Submit」結束;
將以上字串貼到網址列按下 Enter,再回到試算表一看:
兩筆資料均順利寫入試算表!
2. 寫入資料注意事項:
- 第 1 點的舉例只傳送兩筆資料,如果問卷有多個問題,依照以上格式將所有問題依序塞入字串即可。
- 當使用 javascript 傳送資料時,為了避免某些字元在網址列被辨識錯誤,字串最好經過 escape 轉換,確保能成功存入試算表。
3. 動態傳送資料:用 js 寫這段程式碼稍微冗長一點,不過相信會看這篇文章的讀者,至少有一定的 js 程度,那就假設都對 jQuery 很熟悉好了。以下使用 jQuery 舉例,使用 getScript 即可傳送資料寫入表單:
<script>
$.getScript("傳送網址");
</script>
是不是很簡單?一行就解決了。("傳送網址" 的字串請見前面「1. 利用網址傳送資料」的範例)
四、資料庫應用舉例
舊版文章提供了「推文系統」 當作應用的舉例,目前而言比較近期的作品「部落格即時留言板 WYBOARD」會是較好的例子。
只是這兩個當作應用範例的話,程式仍是過於龐大,不是那麼淺顯易懂。將來有機會的話會弄個簡易範例,易於資料庫讀取、寫入的實際運用說明。
用 Google Apps Script 操作試算表系列文章:
版主您好,當我在使用javaScript印出資料庫內容時:
回覆刪除在已登入 或 已登出 google帳戶時完全沒有問題。
問題在有時候會完全無法印出資料庫內容,網頁一片空白!
手動鍵入Json 格式網址後發現,將自動轉到google登入頁面。
處於半登入狀態(已登入帳戶,但需重新輸入密碼),所以我的網頁才會完全無法印出資料。
各位有遇到類似的問題嗎?非常感謝~
版主你好,想請問有沒有更新的教學,新版拿到的連結已經不是rss結尾,沒辦法照文章做讀入的動作,新版的連結長這樣:https://docs.google.com/spreadsheets/d/1KwVwMoqsxAnofA5x46nXEdzaDfdIn7tMxv5lDBIDq1Y/pubhtml
回覆刪除跪求,謝謝版主大大
您好:
回覆刪除剛好在研究這個動作,看到您的網頁。
可以向您索取舊版資料以做參考嗎?
謝謝:)
不知道如何用悄悄話耶@@
yingjen.android@gmail.com
請問 我想寫一個用以上教學用好的網址上傳資料的方法 但我並不想要有後面GOOGLE表單轉到的畫面,可以避開或是在跳轉嗎?
回覆刪除<6432114052741457489>(以上內容請勿刪除,從括號之後開始留言)http://imgur.com/7eVW3yB.png 這個是我寫的
回覆刪除<3093486257462618578>(以上內容請勿刪除,從括號之後開始留言)這一個是我用的,我只是單存開啟網頁,因欸我不知道怎麼用javascript的部分..,對了,有辦法分行嗎?不然船的訊息都擠在一行...
回覆刪除https://docs.google.com/forms/d/1nAgkEwGx0dP2vQy266vhPaKtah_yOOD42y141DJ8Phc/formResponse?entry.2000608003=tesy
請問照教學
回覆刪除是不是應該是這種用法?
$.getScript("https://docs.google.com/forms/d/e/1FAIpQLSdrX5zdy4YKIGVp9axctQb5YYUhiuEcGBjOsEvcTSDez96ehw/formResponse?entry.2046751420=WFU BLOG&submit=Submit");
但我會收到錯誤訊息
Refused to execute script from 'https://docs.google.com/forms/d/e/1FAIpQLSdrX5zdy4YKIGVp9axctQb5YYUhiuEcGBj…ehw/formResponse?entry.2046751420=WFU%20BLOG&submit=Submit&_=1485278199998' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
以前這用法可行是不是他不會用 HTML 呈現接到參數的畫面?
還是我哪裡寫錯了嗎?
我只是想問一下究竟是我的寫法寫錯,還是現行版本無法用這種方式?
補充一下
回覆刪除我剛查證是監視 JavaScript Console log 會出現 Error log
但我去 Excel 看他確實會存進去
不過很納悶為什麼會這樣有錯誤訊息,卻功能又正常傳送。
感謝!期待後續系列文章!
刪除