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
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
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伺服器返回內容壓縮編碼
Thumbnail
提到後端工程師,似乎就只是開發 API,但一個複雜的系統其實不太可能只透過 API 就能完成,例如一個簡單的功能,註冊會員,其實是由好幾個不同類型的工作互相配合,您才能收到開通信,才確保資料庫不會有一堆未開通帳號等。所以今天就來聊聊一個系統有幾種不同執行方式的工作。
Thumbnail
提到後端工程師,似乎就只是開發 API,但一個複雜的系統其實不太可能只透過 API 就能完成,例如一個簡單的功能,註冊會員,其實是由好幾個不同類型的工作互相配合,您才能收到開通信,才確保資料庫不會有一堆未開通帳號等。所以今天就來聊聊一個系統有幾種不同執行方式的工作。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News