想做個簡單的網站，卻苦惱沒後台工程師嗎？
今天要來分享一個儲存資料的方式，你不需要 MySQL 也不需要 DataBase.
你只需要 JavaScript, PHP, 以及一個 JSON data file.
最近做了一個 25sprout 的 尾牙許願池，
需要一個簡單的 data array 去記錄大家許的願望，
但又不想要建立一個專屬的 DataBase 。
於是轉而使用 JSON data file 去儲存陣列，
然後再由 Html 搭配 JavaScript 與 PHP 去存取
準備資料檔案
首先你需要一個 JSON File, 檔名可以自定，在以下範例中我們稱為 data.json
這個檔案中有一個 dataset 裡面有一些預設的 data.
{
"dataset":[
"Nexus 5 Japan",
"奇美 4K 電視",
"Xbox one",
"滾筒洗衣機",
"豪宅",
"空軍一號"
]
}讀取資料
要如何在網頁開啟時，讀取目前所有的 wish 並且顯示在前台呢？
我們要藉由 getJSON 取得 “data.json”，
並且將每個 wish 的文字，塞到一個個的 div 中
$(document).ready(function() {//執行 getData();
getData();
//定義 getData Function
function getData(){
$.getJSON('data.json', function(data) {
//取得 json 取得所有的 dataset
wishes = data.dataset;
//取得 wish 數量
var length = wishes.length;//在前台呈現所有的 wish
for( var i = length; i >0; i-- ){
$('.wish-pool').append(''+wishes[i-1]+'');
}
});
};
});
儲存資料
你要準備一個 HTML File, 在以下範例中我們稱為 index.html
於 index.html 中，我們會需要一個 input 以及 一個 div（或是 Button）
WISH接著於 javascript Tag 中撰寫 #wish-btn 的 onclick Event.
當 #wish-btn onclick 時會執行 “saveData()” function,
saveData 會先取得 #giftname input 的值，
並且透過 ajax 將資料傳至 addData.php 做儲存的動作。
$(document).ready(function() {
//Click Wish Button to Save
$('#wish-btn').click(function(){
saveData();
});
// 定義 savedata 的動作，
function saveData(){
//如果 giftname 空白不能送出
if ( $('#giftname').val() == '') {
alert('Please Write A Gift');
} else {
//取得新願望 並塞到前台。
var newWish = $('#giftname').val();
newWish = escapeHtml(newWish); // 2014.09.19 更新，用於替換一些符號;
//把data 存回去
$.ajax({
url: "addData.php",
type: "POST",
data: { wish : newWish },
success: function(data){
if ( data == '1'){
alert('哎呀，好像有什麼東西出錯啦，請稍後再試。');
} else {
// do something if success
}
$('#giftname').val(''); //清空input
}
});
}
};
});//2014.09.19 更新, 用於取代一些符號;
function escapeHtml(text) {
return text
.replace(/&/g, “&")
.replace(//g, “>")
.replace(/"/g, “"")
.replace(/’/g, “'");
}
最關鍵的是怎麼利用 PHP 將新的願望存到 data.json 的最後面。
你需要一個 php 檔案，在範例中命名為 "addData.php"，當 ajax 將 newWish 傳送到 addData.php 時，
會先開啟 data.json，並且檢查傳送過來的 newWish 是否為 null，
（這非常的重要，否則一不小心就會把 JSON 檔案變成空白啦 XD 許願池就在前幾天清空了一次 嗚嗚）。是不是非常的簡單又有趣呢？
學起來做自己的 Portfolio Website 也很實用呢。
哎呀，為什麼會有 9.19 的更新呢？最近正準備來寫個 2014 年許願池，意外發現我被 Hack 了 (>///<)
畢竟我是一個從草屯出生，沒有想過會跟不認識的人有網路上互動的人物，
沒想到我寫的小工具也會被 Hack，意外的有點開心，但也有點小緊張就是了。總之就是我們存入的 newWish 忘記過慮可能是"前台語言"的文字了。
所以就被存入了 alert('hack') 的願望，一進許願池就會有 alert XD。兩個解決辦法：
[方法一]：存入 JSON 之前取代掉這些文字。
[方法二]：append 到前台前取代掉。
後來選用方法一取代掉這些文字～//在你的 script 部分加入以下function;
function escapeHtml(text) {
return text
.replace(/&/g, "&")
.replace(/ .replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}並於我們儲存資料的步驟中，多加一個步驟替換掉一些符號。//取得新願望 並塞到前台。
var newWish = $('#giftname').val(); //在這個後面
newWish = escapeHtml(newWish); // 新增這行
