學期2-3 自學經驗分享: URL-encoded

更新 發佈閱讀 3 分鐘

狀況;緣起

在跟著教材執行To-do list清單裡面新增一筆待辦事項時,發現透過GET方法傳送表單的時候,其資料會直接顯示在網址列上,所以通常都會改用POST方法以保持資料的機密性。然而一開始當我們透過req.body這個物件來抓使用者傳送的資料前,教材有提到需要先經過bodyParser提供的方法處裡URL-encoded 格式的請求,但發現好像不懂什麼是URL-encoded。

尋找與嘗試

將URL-encoded相關關鍵字透過google後,瞭解其又稱為Percent-encoding,且專門用於透過HTTP請求來提供HTML表單的資料,最常見的情形大概是當我們有時輸入資料完成後按下送出,網址頁會將我們欲連結的網誌進行編碼,其編碼方式就是URL-encoded,這也是為什麼body-parser這個中介軟體時,明明可以解析像是JSON、XML、Raw等多種格式的資料,我們最後是選擇URL-encoded。此編碼的原理簡單說是先將欲轉碼的字元透過UTF-8轉換成byte stream,接著找到對應之16進位表示法,最後再將每個byte前面新增一個百分比符號做串接,這也是為什麼通常我們送出中文的表單資料後,常常會看到很多百分比符號的原因。

分享與展望

經過這個尋找方法原因相關搜尋,會發現一開始只是要找為什麼後端透過body-parser來解析資料事是選擇URL-encoded,但其實搜尋的過程中又發現了許多問題,像什麼是編碼,什麼是text/xml、什麼是UTF-8,一份網路資源可能又會衍生出多種自己未曾聽過的名詞,這時候聚焦好在當初為什麼產生在致個問題的原因就很重要,以此次的自學經驗,其實做重要的一句話就是URL-encoded為專門用來提交HTML表單的資料,不然都會有種花了一整個下午時間,整個專案卻沒有什麼進展的挫折感。 ,但其他較為陌生的名詞對我這種非本科生而言,當然還是需要另外花時間學習的。

參考資源

留言
avatar-img
Blockcyber的沙龍
2會員
15內容數
紀錄轉職路上的點點滴滴
Blockcyber的沙龍的其他內容
2023/01/18
Introduction to WebRTC 由於之後想要做的專題是跟即時視訊相關,在開始作業前想對webrtc有些基本的了解,結果就是一踏入了解就發現這個水深的可怕,之後每天除了寫一點go,也會花時間學習這個協定。WebRTC是個用於瀏覽器之間溝通的協定,透過NAT Traversal(STUN、
Thumbnail
2023/01/18
Introduction to WebRTC 由於之後想要做的專題是跟即時視訊相關,在開始作業前想對webrtc有些基本的了解,結果就是一踏入了解就發現這個水深的可怕,之後每天除了寫一點go,也會花時間學習這個協定。WebRTC是個用於瀏覽器之間溝通的協定,透過NAT Traversal(STUN、
Thumbnail
2023/01/17
Stress testing 一早起床發現昨天辛苦整天網站又不能跑了,去看error.log發現原來是有其他服務使用到了80port,造成根本監聽不到,再去找找看是那些服務,結果可能是apache2使用到,直接怒sudo service apache2 stop,網站就恢復正常了。 今天除了再多熟悉
Thumbnail
2023/01/17
Stress testing 一早起床發現昨天辛苦整天網站又不能跑了,去看error.log發現原來是有其他服務使用到了80port,造成根本監聽不到,再去找找看是那些服務,結果可能是apache2使用到,直接怒sudo service apache2 stop,網站就恢復正常了。 今天除了再多熟悉
Thumbnail
2023/01/16
What the hack? 昨天信誓坦坦想說要將每天學習心得做一點紀錄,結果今天只做一件事,就是要把網站加上SSL憑證,再到Nginx做設定,以為一小時內就搞定的事情就處理了一整天...,可能是沒有分號、可能是url少了/符號、可能是沒有做port的導向、也可能檔案路徑設定錯誤,真的心中各種不甘,
Thumbnail
2023/01/16
What the hack? 昨天信誓坦坦想說要將每天學習心得做一點紀錄,結果今天只做一件事,就是要把網站加上SSL憑證,再到Nginx做設定,以為一小時內就搞定的事情就處理了一整天...,可能是沒有分號、可能是url少了/符號、可能是沒有做port的導向、也可能檔案路徑設定錯誤,真的心中各種不甘,
Thumbnail
看更多
你可能也想看
Thumbnail
你想像有一個黑盒子,它會跟你說輸入一個input,而會得出什麼Output,而你要把這個Input傳遞給黑盒子是透過http的方式
Thumbnail
你想像有一個黑盒子,它會跟你說輸入一個input,而會得出什麼Output,而你要把這個Input傳遞給黑盒子是透過http的方式
Thumbnail
上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
Thumbnail
上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
Thumbnail
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
Thumbnail
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
Thumbnail
UiPath除了能在本機端執行工作,也可透過特定功能與網頁互動,例如將網路資訊擷取下來(爬蟲)或自動寄出信件等。我們有介紹過如何在UiPath使用JavaScript增加與網頁互動的彈性,這次要分享Create HTML Content功能,並透過實作案例說明製作客製化信件的流程!
Thumbnail
UiPath除了能在本機端執行工作,也可透過特定功能與網頁互動,例如將網路資訊擷取下來(爬蟲)或自動寄出信件等。我們有介紹過如何在UiPath使用JavaScript增加與網頁互動的彈性,這次要分享Create HTML Content功能,並透過實作案例說明製作客製化信件的流程!
Thumbnail
UTF-8 萬國碼在規格定義時,有建議在文件的開始處,加入位元組順序記號 (BOM, byte-order mark)。但 Plain Text 文件,就是全部都是文字,將它加入檔頭標記,就不是純文字檔案了,所以一般都沒有實作成有 BOM 檔頭的檔案。
Thumbnail
UTF-8 萬國碼在規格定義時,有建議在文件的開始處,加入位元組順序記號 (BOM, byte-order mark)。但 Plain Text 文件,就是全部都是文字,將它加入檔頭標記,就不是純文字檔案了,所以一般都沒有實作成有 BOM 檔頭的檔案。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
本篇文章講解了字符編碼的基礎知識,包括ASCII, Unicode 和 UTF-8的誕生背景、解決的問題以及轉換方式。瞭解這些知識有助於解決在讀檔案時用錯誤的編碼方式轉換就會出現亂碼等問題。文章內容涉及電腦技術中的字符編碼相關歷史緣由,可幫助讀者解決相關疑問。
Thumbnail
本篇文章講解了字符編碼的基礎知識,包括ASCII, Unicode 和 UTF-8的誕生背景、解決的問題以及轉換方式。瞭解這些知識有助於解決在讀檔案時用錯誤的編碼方式轉換就會出現亂碼等問題。文章內容涉及電腦技術中的字符編碼相關歷史緣由,可幫助讀者解決相關疑問。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News