jQuery | 利用 Google Spreadsheet 作資料庫

本篇分為兩部分,一是從Google spreadsheet中讀取資料,二是從網頁端向表單發送需建立資料。


  • 讀取資料

各位可以看到右下角的偽春菜Label链接 ,這三者都是利用Google所提供的 JSON 格式來去載入資料,當然你如果功力更高深的話,可以做各種應用也是沒甚麼大問題的。之前因為想搞一個資料庫來管理偽春菜的話才搞(在此之前都是設定固定的字串陣列,修改還需要開啟HTML來修改,實在是非常麻煩),但是真正的理由是,我覺得很麻煩,所以在想有沒有辦法能變得更輕鬆管理,於是就想到利用資料庫來管理。但是沒有錢、沒有主機,要怎麼建立一個專屬於自己的資料庫,所以我把腦筋動到了Google spreadsheet,好在前人貢獻良多(大多都是外國人),我也因此依樣畫葫蘆。

    • 取得 JSON 格式

根據 WFU利用 Google 問卷(試算表)當小型資料庫__(二)讀取、儲存資料庫

建立表單後,選擇 [檔案] > [發佈到網路...] ,並且發佈該表單。

之後 取得公開資料連結內, 選擇為 RSS 格式,你會得到類似於下面的圖。
其中模糊化的部分是你的 Key ,紅色底線的部分因為需要的是 JSON 而不是 RSS ,所以將 basic?alt=rss 更改為 values?alt=json

好了,你現在得到了 JSON 格式的資料了,那麼要怎麼處理呢?
先回到您所建立的表單,你會發現一件事,第一列似乎Google已經幫你弄好了,而每一欄似乎都是每個問題的標題。
You Got it !

沒錯!除了第一欄以外,其他都是問題的標題。

再根據 WFU利用 Google 問卷(試算表)當小型資料庫__(二)讀取、儲存資料庫 所言
則每列為 i (第一列不算) 每個欄位之值分別是

json.feed.entry[i].gsx$時間戳記.$t
json.feed.entry[i].gsx$String.$t
json.feed.entry[i].gsx$問題標題.$t
...

以此類推。

    • 讀取資料

因為我比較懶,所以沒辦法像 WFU 一樣,多弄個Script 然後 callback 某個 JS 的 function,所以我就用了 Jquery 的 $.getJSON() 來取代。
$.getJSON( JSON格式的網址 ,function(JData){
    for (var i=0; i < JData.feed.entry.length ;i++){
        $(this).append(JData.feed.entry[i].gsx$問題標題.$t);}
});

JData 是將所得到 JSON 的暫存陣列

這樣不就是很簡短嗎?現在你可以在每個文章試試看是否成功了 :D

  • 寫入資料

跟讀入資料一樣,我也是參考 WFU 所提供的方法,但我一直都認為不是一個最好的方法 ( iframe , 自動跳轉 ),所以我一直往國外的網站找,後來想到有人利用油猴對Google表單進行寫入資料,我也是參考了,但依舊一無所獲,直到在某個網站找到真諦!

依據 stackoverflow 的 Ajax form submission in IE(8) [closed]

利用 $.ajax 來建立資料
不過在建立資料之前,你需要得到你的 formkey

進入之前建立的表單後,選擇 [表單] > [前往即時表單]
查看一下網址列

(Old Version)
https://docs.google.com/spreadsheet/viewform?formkey=xxxxxxxxxxxxxx#gid=0
紅色部分就是你的formkey,這很重要,因為沒了 key 你就看不到 Air, Clannad, Kanon 和 Little Buster等等
$.ajax( {
    type: 'POST',
    url: 'https://docs.google.com/spreadsheet/formResponse?formkey=' + formkey的值 + '&ifq',
    data: { name : 值 [, name : 值 ] }} );

(Lastest Version)
https://docs.google.com/forms/d/xxxxxxxxxxxxxxxxxxx/viewform
$.ajax( {
    type: 'POST',
    url: 'https://docs.google.com/forms/d/' + formkey的值 + '/formResponse',
    data: { name : 值 [, name : 值 ] }} );


這方法不會跳轉畫面也不會使用iframe,對我來說是一個最棒的方法。

小備註:data內的name是看表單中的name值


參考資料

stackoverflow 的 Ajax form submission in IE(8) [closed]
WFU利用 Google 問卷(試算表)當小型資料庫__(二)讀取、儲存資料庫

0 件のコメント:

コメントを投稿