Ajax 是一種用于在客戶端和服務器之間進行異步數據傳輸的技術，它可以在不刷新整個頁面的情況下，實現對特定部分的數據更新。在之前的文章中，我們介紹了如何使用 Ajax 傳遞數據，本文將進一步探討如何使用 Ajax 傳遞具有相同 name 屬性的數據。 例如，假設我們有一個簡單的表單，其中有多個輸入字段的 name 屬性相同，我們需要將這些數據通過 Ajax 發送到服務器。在傳統的表單提交方式中，同名的字段會被以數組的形式提交，而使用 Ajax 可以更加靈活地處理這些數據。 首先，讓我們來看一下表單的結構：

使用 Ajax 傳遞同名數據的表單：

<form id="myForm">
<input type="text" name="data" value="value1"><br>
<input type="text" name="data" value="value2"><br>
<input type="text" name="data" value="value3"><br>
<button type="button" onclick="sendData()">發送數據</button>
</form>

在上面的示例中，我們有三個文本輸入字段的 name 屬性都設置為 "data"，分別有不同的值。在按下“發送數據”按鈕時，將調用 JavaScript 函數 "sendData()" 來執行數據傳輸操作。 接下來，我們來探討如何通過 Ajax 來傳遞這些同名的數據。 首先，在 JavaScript 中定義 "sendData()" 函數：

JavaScript 代碼：

function sendData() {
var form = document.getElementById("myForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", "process.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 數據傳輸完成后的處理邏輯
}
};
xhr.send(formData);
}

上述代碼中，我們首先獲取表單元素（通過 id "myForm"），然后創建一個 FormData 對象并傳入表單作為參數。接下來，我們使用 XMLHttpRequest 對象來發送數據。這個對象使用 open() 方法來設置請求的類型、URL 和異步標識。在異步標識設置為 true 后，我們可以在請求發送的同時執行其他的 JavaScript 代碼。 當然，你也可以使用其他的 JavaScript 庫如 jQuery，它提供了更簡潔的方法來發送 Ajax 請求。下面是一個使用 jQuery 的示例：

使用 jQuery 傳遞同名數據：

function sendData() {
var formData = $("#myForm").serialize();
$.ajax({
type: "POST",
url: "process.php",
data: formData,
success: function(response) {
// 數據傳輸完成后的處理邏輯
}
});
}

在上面的代碼中，我們使用了 jQuery 的 serialize() 方法來序列化表單數據，并將其作為 Ajax 請求的 data 參數。在請求成功后，可以在 success 回調函數中處理返回的響應數據。 綜上所述，無論是使用原生的 JavaScript 還是第三方庫如 jQuery，我們都可以通過 Ajax 來傳遞具有相同 name 屬性的數據。這種方法在處理表單或其他需要傳遞重復數據的場景中非常有用。無論是處理數據的邏輯、插入數據庫還是其他操作，通過 Ajax 傳遞同名數據都能夠靈活高效地完成任務。

總結：

在本文中，我們深入探討了如何使用 Ajax 傳遞具有相同 name 屬性的數據。通過使用 FormData 對象和 XMLHttpRequest，或者是利用 jQuery 的 serialize() 方法，我們可以輕松地處理具有相同 name 屬性的數據。這種方式在處理表單或其他需要傳遞重復數據的場景中非常有用，并且可以提高開發效率。無論是在原生 JavaScript 環境下，還是使用第三方庫，Ajax 提供了一種強大的方式來異步傳輸數據，使得我們能夠在不刷新整個頁面的情況下，實現靈活的數據更新。