qian
在現代網頁應用程式開發中，前端與後端的溝通通常透過HTTP請求來完成。當前端的JavaScript程式需要將資料傳送到後端處理時，有時候會遇到如何正確地傳送陣列型別的資料。以下是一份詳細的中文繁體指南，介紹如何在不同的情況下在前端使用JavaScript/TypeScript傳送陣列到後端，並提供範例程式碼以供參考。
1. JavaScript物件表示法 (JSON)
最常見的方法是將陣列轉換為JavaScript物件表示法(JSON)字串，然後透過`application/json`內容類型的HTTP請求頭發送到後端。這適用於RESTful API或任何接受JSON作為輸入的伺服器端語言。
// 假設我們有一個名為 'myArray' 的陣列變數
const myArray = ["item1", "item2"];
function sendToServer() {
// 將數組轉換爲JSON字符串
let jsonString = JSON.stringify(myArray);
// 發送HTTP請求
fetch('/api/endpoint', {
method: 'POST', // HTTP動詞，如POST, PUT, PATCH, DELETE等
headers: {
'Content-Type': 'application/json' // 告訴服務器我們正在發送JSON數據
},
body: jsonString // 發送JSON字符串作爲請求體
})
.then((response) => response.json()) // 將響應解析爲JSON對象
.catch((error) => console.error('Error:', error));
}
在這個例子中，`sendToServer()`函式會先將陣列轉換為JSON字串 `jsonString`，接著使用Fetch API發出一個包含`application/json`內容類型的HTTP POST請求。請注意，`body`屬性被設定為剛才生成的JSON字串。
2. FormData (HTML表單遞交方式)
如果你需要在表單中包含陣列資料，或者需要兼容舊版的瀏覽器和伺服器端技術，你可以選擇使用`FormData`物件。這種方法允許你在傳統的HTML表單中包含陣列資料，並且可以處理多部分資料上載。
// 假設我們有一個名稱為 'files[]' 的陣列元素
var filesList = document.querySelectorAll('#fileInput')[0].files;
// 創建一個新的 FormData 對象
var formData = new FormData();
formData.append('files[]', filesList[0]);
formData.append('files[]', filesList[1]);
// 發送 HTTP 請求
var request = new XMLHttpRequest();
request.open('POST', '/upload');
request.setRequestHeader('Content-type', 'multipart/form-data');
request.onload = function () {
console.log(`Uploaded file ${filesList[0].name}`);
};
request.send(formData);
在上面的示例中，`filesList`是一個包含了用戶選取的檔案的`FileList`物件。每一個`File`物件都會被追加到`FormData`物件的`files[]`鍵值對中。這樣，當提交表單時，資料就會以多部分形式上載到伺服器的`/upload`路徑。
3. URL編碼 (Query String)
另一種方法是將陣列中的每個項目都附加到URL查詢字串中。這種方法可能不安全且具有潛在限制，因為它可能會超出URL長度限制，但對於小型資料集來說，它可能是可行的。
// 假設我們有一個名稱為 'items' 的陣列變數
const items = ['item1', 'item2'];
// 生成 Query String
const queryString = items.map(encodeURIComponent).join('&');
const urlWithQueryParam = '/someUrl?' + queryString;
// 發起 HTTP GET 請求
window.location.href = urlWithQueryParam;
在上述範例中，我們使用了`map()`和`join()`方法來創建一個包含陣列項目的URL編碼查詢字串。最後，該字串被加到了目標URL之後。
總結而言，根據你的需求和環境的不同，你可能需要選擇其中一種或多種方法來解決問題。瞭解這些方法的優缺點以及它們在不同情境下的適用性是非常重要的。
