學期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
留言分享你的想法!
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
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
本篇文章講解了字符編碼的基礎知識,包括ASCII, Unicode 和 UTF-8的誕生背景、解決的問題以及轉換方式。瞭解這些知識有助於解決在讀檔案時用錯誤的編碼方式轉換就會出現亂碼等問題。文章內容涉及電腦技術中的字符編碼相關歷史緣由,可幫助讀者解決相關疑問。
Thumbnail
本篇文章講解了字符編碼的基礎知識,包括ASCII, Unicode 和 UTF-8的誕生背景、解決的問題以及轉換方式。瞭解這些知識有助於解決在讀檔案時用錯誤的編碼方式轉換就會出現亂碼等問題。文章內容涉及電腦技術中的字符編碼相關歷史緣由,可幫助讀者解決相關疑問。
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
Thumbnail
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
Thumbnail
上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
Thumbnail
上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
Thumbnail
UTF-8 萬國碼在規格定義時,有建議在文件的開始處,加入位元組順序記號 (BOM, byte-order mark)。但 Plain Text 文件,就是全部都是文字,將它加入檔頭標記,就不是純文字檔案了,所以一般都沒有實作成有 BOM 檔頭的檔案。
Thumbnail
UTF-8 萬國碼在規格定義時,有建議在文件的開始處,加入位元組順序記號 (BOM, byte-order mark)。但 Plain Text 文件,就是全部都是文字,將它加入檔頭標記,就不是純文字檔案了,所以一般都沒有實作成有 BOM 檔頭的檔案。
Thumbnail
UiPath除了能在本機端執行工作,也可透過特定功能與網頁互動,例如將網路資訊擷取下來(爬蟲)或自動寄出信件等。我們有介紹過如何在UiPath使用JavaScript增加與網頁互動的彈性,這次要分享Create HTML Content功能,並透過實作案例說明製作客製化信件的流程!
Thumbnail
UiPath除了能在本機端執行工作,也可透過特定功能與網頁互動,例如將網路資訊擷取下來(爬蟲)或自動寄出信件等。我們有介紹過如何在UiPath使用JavaScript增加與網頁互動的彈性,這次要分享Create HTML Content功能,並透過實作案例說明製作客製化信件的流程!
Thumbnail
你想像有一個黑盒子,它會跟你說輸入一個input,而會得出什麼Output,而你要把這個Input傳遞給黑盒子是透過http的方式
Thumbnail
你想像有一個黑盒子,它會跟你說輸入一個input,而會得出什麼Output,而你要把這個Input傳遞給黑盒子是透過http的方式
Thumbnail
常常會遇到好不容易寫好程式,但是輸出的時候沒辦法按照自己想要的格式,或是間隔來輸出,這時需要用到的就是格式化輸出,格式化輸出就是調整排版的一個形式。
Thumbnail
常常會遇到好不容易寫好程式,但是輸出的時候沒辦法按照自己想要的格式,或是間隔來輸出,這時需要用到的就是格式化輸出,格式化輸出就是調整排版的一個形式。
Thumbnail
網址是 API 的門面,大家使用 API 的第一步就是要看它。 第一眼就要讓人就知道這隻 API 在做什麼? 甚至因為遵循標準(目前 REST 是主流),可以類推 API 應該會有什麼功能等等。
Thumbnail
網址是 API 的門面,大家使用 API 的第一步就是要看它。 第一眼就要讓人就知道這隻 API 在做什麼? 甚至因為遵循標準(目前 REST 是主流),可以類推 API 應該會有什麼功能等等。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News