iT邦幫忙

2023 iThome 鐵人賽

DAY 16
0
自我挑戰組

網頁學習30天系列 第 16

網頁學習30天 day16

  • 分享至 

  • xImage
  •  

上次我們新增了幾個頁面,也看到了所謂的GET請求,我們上購物平台時,仔細看網址就能發現一些有趣的東西,我以momo購物為範例,像是我輸入關鍵字bottle:
https://ithelp.ithome.com.tw/upload/images/20231001/20162857qKoXINpj7s.png
可以看到網址上有出現我所蒐尋的關鍵字,然後就會出現購賣水壺的頁面,但是當我們不要透過搜尋欄,直接從網址輸入關鍵字,shoes:
https://ithelp.ithome.com.tw/upload/images/20231001/20162857k4NQ3Donvt.png
他就會出現關於鞋子的購買頁面,再來我們打開f12再前往網路:
https://ithelp.ithome.com.tw/upload/images/20231001/20162857uYdkanrsRH.png
就可以看到有許多的GET請求,接下來我會以其為出發點來製作一個商品網頁,首先我創建了homepage.html、meat.html、vegetable.html以及error.html
接下來一樣先判斷是否為GET請求:
https://ithelp.ithome.com.tw/upload/images/20231001/201628574du2zUiHJK.png
接下來我特過”thing”這個字作為搜尋meat.html或vegetable.html的關鍵字:
https://ithelp.ithome.com.tw/upload/images/20231001/20162857z1mbXBFN64.png
接著透過判斷式來判斷,根據”thing”來判斷要前往哪個頁面:
https://ithelp.ithome.com.tw/upload/images/20231001/20162857GD7sg1HkxQ.png
因此我們在網址後面加入/?thing=meat我們就將前往meat.html,如果加入/?thing=vegetable將前往vegetable.html,若出現錯誤的路徑將前往error.html,接著我們啟動伺服器並輸入網址:
https://ithelp.ithome.com.tw/upload/images/20231001/20162857HSj3PK2GbV.png
接著透過”thing”來尋找:
https://ithelp.ithome.com.tw/upload/images/20231001/20162857NRCeZuKODO.png
接著換一個單字:
https://ithelp.ithome.com.tw/upload/images/20231001/20162857YyDluyvYqe.png
若出現錯誤路徑:
https://ithelp.ithome.com.tw/upload/images/20231001/201628573qpJiIvwjz.png
如此我們就能夠透過GET請求以及URL路徑來達到目的。


上一篇
網頁學習30天 day15
下一篇
網頁學習30天 day17
系列文
網頁學習30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言