frontend
Copyright 2021, 月下麒麟
Day3的練習讓我們學到前端介接API的技巧,但這樣的效果僅能在console log的頁面出現資料,
所以,在介接完成後最主要還是要將內容呈現在瀏覽器(畫面)上
筆者在這小關卡了一下下,花費比較多的精神在釐清語法、關鍵字搜尋…
於此,先做個重點提示整理
下面的實作過程中,我會依序去說明這三個重點
截至目前為止,我們做了前後端分離的工作了,
但是,分離出來的前端我的檔案都還是同一份(app.js)
所以我的程式碼還是寫在同一份,雖然寫在同一份,但其實在HTML語法與Javascript語法仍是不同的
最基本的就是在HTML中嵌入Javascript的語法
可以看到<script>就是Javascript的語法,這邊僅是要帶入一點點語法觀念,
因網路上的文章大都是複合式問題,故在閱讀一些進階的範例程式時,必須要有這樣的概念
不知道讀者們是否還記得Day3 frontend的文章中,於補充的章節提到jQuery的用法
如果忘記了,可以參考這篇Day3學前端 Frontend with React - 串接API with Ajax
以上的函式主架構不難理解,也是拿default app.js去修改,故不多著墨解釋。
仔細的你可以發現在分隔線上下兩端,其實不是同一個函式,是分離的兩個
上面是HTML與Javascript,並且呈現在Browser頁面
下面是jQuery與ajax,並且分別能呈現在Browser、Console log上
再看到這張Browser的圖,比對一下上述的程式碼,應該就不難理解,
其實jQuery到的data並不會被帶入Browser上,
所以必須要了解jQuery與HTML的關係,才會有辦法將data呈現
關鍵就是標有註解(point)重點的那行
Reference:IT邦幫忙 Day28:小事之 jQuery 選擇器
最後一個就是筆者卡關的地方 TT
首先
這邊要表達的就是物件型態不正確,就會出現這個assert [object:Object]
詳細解釋可以參考下方的reference!
Referenct:What does [object Object] mean? (JavaScript)
Reference:W3school JSON.stringify()
接著
利用呼叫出物件的資料屬性,就能依序呈現,
但你是不是覺得這樣寫很囉唆呢!!!
最後
是不是精簡很多了啊~ (茶…
今天就先到這邊,接下來就要嘗試頁面的排版與渲染 敬請期待…