Ajax 是一種用于創建更加靈活和交互性網頁應用程序的技術。本文將探討如何使用 Ajax 通過上傳本地 JSON 文件來實現數據交互的功能。在完成本文的閱讀后，您將了解如何使用 Ajax 和 JSON 文件上傳數據，并可以根據自己的需求進行靈活修改和使用。

假設我們有一個保存用戶信息的網頁應用程序，用戶可以上傳一個包含多個用戶信息的 JSON 文件，然后我們將這些信息顯示在網頁上。這就是我們需要使用 Ajax 和本地 JSON 文件上傳的實際場景。下面我們將詳細介紹如何實現這一功能。

首先，讓我們來創建一個簡單的 HTML 頁面，用于展示用戶信息。我們在頁面的頂部添加一個文件輸入框，用于選擇要上傳的 JSON 文件。然后在頁面的底部創建一個用于展示用戶信息的容器。代碼如下：

<input type="file" id="fileInput" />
<div id="userInfoContainer"></div>

接下來，我們需要使用 JavaScript 來處理文件上傳和數據展示的邏輯。我們首先需要監聽文件輸入框的 change 事件，以便當用戶選擇了文件后執行相應的操作。在事件處理函數中，我們使用 FileReader 對象來讀取文件內容，并將其轉換為 JavaScript 對象。然后，我們可以將這些用戶信息展示在頁面的容器中。具體代碼如下：

document.getElementById('fileInput').addEventListener('change', function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
var users = JSON.parse(contents);
var container = document.getElementById('userInfoContainer');
container.innerHTML = '';
users.forEach(function(user) {
var userInfo = document.createElement('p');
userInfo.innerText = 'Name: ' + user.name + ', Age: ' + user.age;
container.appendChild(userInfo);
});
};
reader.readAsText(file);
});

以上代碼中，我們使用 FileReader 對象的 onload 事件來監聽文件讀取完成后的操作。在事件處理函數中，我們首先將文件內容轉換為字符串，然后使用 JSON.parse() 方法將字符串轉換為 JavaScript 對象。接著，我們清空用戶信息容器的內容，然后遍歷用戶數組，依次創建包含用戶信息的p元素，并將其添加到容器中。

現在我們已經完成了使用 Ajax 上傳本地 JSON 文件并展示用戶信息的功能。當用戶選擇一個 JSON 文件后，文件會被讀取，然后將其內容轉換為 JavaScript 對象，并展示在頁面上。這使得我們可以輕松地與用戶信息進行交互和操作。

總而言之，Ajax 可以幫助我們實現更加靈活和交互性的網頁應用程序。通過使用 Ajax 和本地 JSON 文件，我們可以輕松上傳和展示用戶信息，并根據自己的需求進行定制和擴展。希望本文對您理解和應用 Ajax 提供了一些幫助。