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 測試為例)

vocus|新世代的創作平台


實際上的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 測試為例):

vocus|新世代的創作平台


疑點

在撰寫 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 為例)

vocus|新世代的創作平台


結語

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

共勉之


參考資料

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




留言
avatar-img
DavidHi的沙龍
10會員
40內容數
此篇教學 : 使用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
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
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
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
在專案中與廠商測試API回傳的json字串出現無法解析的狀況,記錄發現過程與解決的紀錄,提供程式面和檔案面的解決方法。
Thumbnail
在專案中與廠商測試API回傳的json字串出現無法解析的狀況,記錄發現過程與解決的紀錄,提供程式面和檔案面的解決方法。
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News