前言:

一直以來都只專心在Html、Css、Jquery的撰寫,第一次看到網站不跳頁轉場的時候還以為是不是先跑了離場動畫,跳頁再加開場動畫.....,後來聽到朋友說那是Ajax才知道,好吧,我知道的太少了。

 

初探:

一開始測試的時候遇到極大的問題,因為測試了半天都沒效果,就是抓不到json檔,後來才發現一定要丟到伺服器!! 本機是什麼鬼都不會出現的...

知道正確環境後,先是開始抓取資料顯示圖片,當然你的json檔必須是正確的(json檔Hen龜毛),檢查Json檔

然後我是用Jquery來使用Ajax呼叫json檔,下圖就是測試的程式碼。

 

主要是將json檔中各data對應的title和images以item.title和item.images抓出來,這個是複製書上的範例,所以它是宣告一個陣列,把抓出來的值丟進去,再加到.content裡面。

 

進階:

知道如何抓資料後,就開始進行切換頁面了,先測試置換標題跟圖片,然後加了換場效果。

設置了header來切換頁面,轉場動畫隨便用4個div來重疊,然後判斷點擊的li的id來知道要抓哪個data的title和images。

成果如下:

 

最終:

開始有點Fu了,要真的切換頁面了,以我的大腦只能想到....我該不會要把各頁面的資料都塞到json裡面吧?

嗯,我也只能這樣做啊(苦笑,雖然覺得哪裡怪怪,但還是硬著頭皮做了。

 

塞進去後,恩,真的可以欸,就是把內容整個替換掉的概念,這邊直接把ajax換頁抓取json寫成function,

因為在測試的時候發現一個問題,那就是按上一頁就GG了欸,所以就用到了history API的用法

網路上有許多介紹:http://l7960261.blogspot.tw/2014/08/ajax-url-f5.html

也有提供History.js的用法,但我用不起來(哈,所以就用我能理解的,一開始進入頁面replaceState,click連結時pushState,這樣每個頁面都有state可以呼叫,之後就是用event.state.page來判斷是哪一頁,若等於0就是回到首頁。成果如下,可以看看上方的url變更情況:

 

後記:

其實還有一個嚴重的問題沒解決(汗,那就是假設我直接網址打內頁的網址,例如XXX/company,是會出現錯誤的,但我目前的認知是應該要靠PHP幫忙拉,所以只能先做到這樣,除非我哪天開竅再來解決這個Bug。

另外就是維護問題,畢竟把所有div、li、span什麼的都塞在json檔裏頭,怎麼想都怪,後人要維護應該也頭很大吧(看隆沒,就等我爾後知道是否有更好的方法囉。

創作者介紹
創作者 detone8523 的頭像
detone8523

Detone's Blog - 低調設計 ‧ 高調前端

detone8523 發表在 痞客邦 留言(0) 人氣()