IT踩坑日常- API格式(x-www-form-urlencoded)

更新於 發佈於 閱讀時間約 5 分鐘

前言

因前陣子在工作上遇到一些[特別]的廠商遇到了一些[特別]的例子,讓我心有餘悸希望之後有踩到坑的同仁可以少跌一些坑。

此次主要業務是與廠商做API介接,但對方的

API(Post)-Request的Body是用x-www-form-urlencoded 格式

單位代碼(dep_id) 
總筆數(all_count)
list []:票號約定清單
異動別(tran_code)(A=增加,D=刪除)
票號(tkt_no)
票種(tkt_tp)(01=成人,02=愛心,03=團體)​


API(Post)-Response是用Json格式

result: 成功與否(true/false) 
all_count:總筆數
list []:票號約定回傳清單
tran_code:異動別(A=增加,D=刪除)
tkt_no:票號
tkt_tp:票種(01=成人,02=愛心,03=團體)
dep_id:單位代碼
date:約定日期/傳輸日期
status:狀態(00=異動成功,01=異動失敗)


踩坑過程

在x-www-form-urlencoded 格式中表現的方式是以Key-Value的方式來呈現,與Json把整個資料表達成一個字串的方式不同,在撰寫Request時在前面兩個屬性dep_id/all_count都還沒甚麼問題,但到了一個Array[Object]的結構時,可能我下的指令也沒有很精確,因為Copilot其實也是回我類似的結構寫法。

我以為的Key-Value表示式

(C# 撰寫為例)

var req = new Dictionary<string, string> 
{
{ "dep_id", request.Bank_Id },
{ "all_count", $"{request.All_Count}" },
{ "list", JsonConvert.SerializeObject(request.List) }
};

我以為的Key-Value表示式是這樣(Postman 測試為例)

raw-image


實際上的array[object] Key-Value表示式

是這樣(C# 撰寫為例):

var req = new Dictionary<string, string> 
{
{ "dep_id", request.Bank_Id },
{ "all_count", $"{request.All_Count}" }
};

var count = 0;
foreach (var item in request.List)
{
req.Add($"list[{count}][{nameof(item.Tran_Code).ToLower()}]", item.Tran_Code);
req.Add($"list[{count}][{nameof(item.Tkt_No).ToLower()}]", item.Tkt_No);
req.Add($"list[{count}][{nameof(item.Tkt_Tp).ToLower()}]", item.Tkt_Tp);
count++;
};

實際上的array[object] Key-Value表示式是這樣(Postman 測試為例):

raw-image


疑點

在撰寫 array[object] 這塊表示式時,浪費了一部分時間,主要是因為在寫這個寫法之前,我還有嘗試另種寫法就是在讀取object的Member值的時候,照理說可以用 item.Tran_Code 或是 item[Tran_Code ]的方法來取值,但我不知為何用.(dot)的方式來取值對方的回應是失敗的,這點我深深不解……

如下所示(C# 撰寫為例)

var count = 0; 
foreach (var item in request.List)
{
req.Add($"list[{count}].{nameof(item.Tran_Code).ToLower()}", item.Tran_Code);
req.Add($"list[{count}].{nameof(item.Tkt_No).ToLower()}", item.Tkt_No);
req.Add($"list[{count}].{nameof(item.Tkt_Tp).ToLower()}", item.Tkt_Tp);
count++;
};


如下所示(Postman 為例)

raw-image


結語

以上是近期遇到浪費許多時間的坑,由於我是第一次遇到 x-www-form-urlencoded 的格式輸出,就當作是種學習解決後豁然開朗的感覺,但或許有人會覺得廠商沒提供範例嗎? 對,沒提供範例,請廠商提供也沒有要提供的意思,只是一直回再試試看……

共勉之


參考資料

Send Array as Part of x-www-form-urlencoded Using Postman




留言
avatar-img
留言分享你的想法!
avatar-img
DavidHi的沙龍
9會員
25內容數
此篇教學 : 使用GitHub架設免費的部落格網站,搭上Hexo靜態模板,在主題頁面中尋找屬於自己的風格套版,輕鬆擁有自己的Blog外,加上留言板/SEO等設定在記錄生活同時也增進與讀者的互動頻率。
DavidHi的沙龍的其他內容
2024/11/02
本文介紹了選擇排序演算法的基本邏輯與實作過程,透過範例分析陣列排序的交換步驟,以及相關的程式碼範例,幫助讀者理解選擇排序的時間與空間複雜度。選擇排序是一個簡單易懂的演算法,對於初學者來說是學習排序演算法的良好基礎。
Thumbnail
2024/11/02
本文介紹了選擇排序演算法的基本邏輯與實作過程,透過範例分析陣列排序的交換步驟,以及相關的程式碼範例,幫助讀者理解選擇排序的時間與空間複雜度。選擇排序是一個簡單易懂的演算法,對於初學者來說是學習排序演算法的良好基礎。
Thumbnail
2024/10/14
本文介紹插入排序演算法,透過與泡沫排序的比較,詳解其運作邏輯與時間、空間複雜度的分析。以撲克牌的整理為例,解釋如何逐步將數字插入已排序的序列中,並提供C#程式碼範例來幫助理解此演算法的實作過程,適合對基礎演算法有興趣的讀者。
Thumbnail
2024/10/14
本文介紹插入排序演算法,透過與泡沫排序的比較,詳解其運作邏輯與時間、空間複雜度的分析。以撲克牌的整理為例,解釋如何逐步將數字插入已排序的序列中,並提供C#程式碼範例來幫助理解此演算法的實作過程,適合對基礎演算法有興趣的讀者。
Thumbnail
2024/09/24
本文探討排序演算法中最基本的一種:泡沫排序。雖然在日常工作中我們多使用內建函數來進行排序,但瞭解其背後的邏輯和效能對於演算法學習至關重要。此文分步介紹了泡沫排序的實作過程,並分析其時間與空間複雜度,助於讀者更深入掌握基礎演算法。
Thumbnail
2024/09/24
本文探討排序演算法中最基本的一種:泡沫排序。雖然在日常工作中我們多使用內建函數來進行排序,但瞭解其背後的邏輯和效能對於演算法學習至關重要。此文分步介紹了泡沫排序的實作過程,並分析其時間與空間複雜度,助於讀者更深入掌握基礎演算法。
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
Thumbnail
在專案中與廠商測試API回傳的json字串出現無法解析的狀況,記錄發現過程與解決的紀錄,提供程式面和檔案面的解決方法。
Thumbnail
在專案中與廠商測試API回傳的json字串出現無法解析的狀況,記錄發現過程與解決的紀錄,提供程式面和檔案面的解決方法。
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
Thumbnail
Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
Thumbnail
Accept:用戶端能夠接收的內容類型。 Accept: text/plain, text/html Accept-Charset:瀏覽器可以接受的字元編碼集。 Accept-Charset: utf8 Accept-Encoding:指定瀏覽器可以支援的web伺服器返回內容壓縮編碼
Thumbnail
Accept:用戶端能夠接收的內容類型。 Accept: text/plain, text/html Accept-Charset:瀏覽器可以接受的字元編碼集。 Accept-Charset: utf8 Accept-Encoding:指定瀏覽器可以支援的web伺服器返回內容壓縮編碼
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News