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
9會員
24內容數
此篇教學 : 使用GitHub架設免費的部落格網站,搭上Hexo靜態模板,在主題頁面中尋找屬於自己的風格套版,輕鬆擁有自己的Blog外,加上留言板/SEO等設定在記錄生活同時也增進與讀者的互動頻率。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
DavidHi的沙龍 的其他內容
在工作情境中手動執行SQL語法更新中文字時,有時會遇到中文字顯示問號(?)的情況。這篇文章將介紹如何解決手動執行SQL語法時造成中文顯示問號(?)的方法。
在工作情境中手動執行SQL語法更新中文字時,有時會遇到中文字顯示問號(?)的情況。這篇文章將介紹如何解決手動執行SQL語法時造成中文顯示問號(?)的方法。
你可能也想看
Google News 追蹤
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
※ 什麼是 RESTful API? 這種運用 HTTP 來表達語義的路由設計風格稱為 RESTful API,它描述了如何實現 Web API 的架構。所謂的 API 是應用程式介面 (application programming interface),網址也是一種應用程式的「介面」,故稱為
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
金融業需遵守金檢規則,建立API分級協助和管理程序確保API合規,使用OAuth 2.0和API KEY授權功能降低風險,實行API認證和金鑰機制保障資料安全。監控API使用,建立控制機制,選擇優良的APIM,提供全面的API管理和安全。
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
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
此為不負責任教學,介面操作依實際情況而有所異動 額外資源參考 [API] 串接 Imgur API 圖床服務,上傳到指定相簿 israynotarray超完整 Express Imgur 套件上傳教學 [前端筆記] 用 axios 串接 imgur API上傳圖片
xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
※ 什麼是 RESTful API? 這種運用 HTTP 來表達語義的路由設計風格稱為 RESTful API,它描述了如何實現 Web API 的架構。所謂的 API 是應用程式介面 (application programming interface),網址也是一種應用程式的「介面」,故稱為
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
當這產品的這個 API 被呼叫,再從回傳內容的某個欄位欄位來判斷,只要“這個欄位”顯示 false 就代表不支援」,雖然這樣的設計也能滿足功能需求…
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
金融業需遵守金檢規則,建立API分級協助和管理程序確保API合規,使用OAuth 2.0和API KEY授權功能降低風險,實行API認證和金鑰機制保障資料安全。監控API使用,建立控制機制,選擇優良的APIM,提供全面的API管理和安全。
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伺服器返回內容壓縮編碼