在前端開發中，我們經常需要通過Ajax請求獲取服務器返回的數據，并將其展示在網頁上。而往往我們獲取到的數據是以JSON格式的字符串的形式返回的。為了能夠正確地處理這些數據，我們需要將JSON字符串轉為JavaScript對象或數組。在本文中，我將會介紹使用Ajax請求獲取JSON數據，并將其轉為JavaScript對象或數組的方法，并通過舉例說明其使用方式。 首先，讓我們考慮以下的場景：我們正在開發一個在線商城的網頁應用，我們需要通過Ajax請求獲取服務器返回的商品列表。服務器返回的數據是以JSON格式的字符串的形式，例如： ```json { "count": 3, "products": [ { "id": 1, "name": "商品1", "price": 10.00 }, { "id": 2, "name": "商品2", "price": 20.00 }, { "id": 3, "name": "商品3", "price": 30.00 } ] } ``` 現在我們需要將這個JSON字符串轉為JavaScript對象，以便能夠使用其中的數據。我們可以使用`JSON.parse()`方法來完成這個轉換過程。下面是一個使用`JSON.parse()`方法的例子： ```javascript var jsonString = '{"count": 3, "products": [...] }'; var jsonObj = JSON.parse(jsonString); ``` 通過上述代碼，我們成功地將JSON字符串轉為了JavaScript對象，這樣我們就能夠通過`jsonObj`變量來訪問其中的數據了。 接下來，假設我們希望展示這些商品的詳細信息。我們可以使用JavaScript中的`for`循環來遍歷商品數組，并將每個商品的信息展示在網頁上。下面是一個完整的例子： ```javascript var jsonString = '{"count": 3, "products": [...] }'; var jsonObj = JSON.parse(jsonString); var productsContainer = document.getElementById('products-container'); for (var i = 0; i< jsonObj.products.length; i++) { var product = jsonObj.products[i]; var nameElement = document.createElement('p'); nameElement.textContent = '商品名稱：' + product.name; productsContainer.appendChild(nameElement); var priceElement = document.createElement('p'); priceElement.textContent = '商品價格：' + product.price; productsContainer.appendChild(priceElement); } ``` 在上述代碼中，我們通過`document.createElement()`方法創建了`p`標簽，然后通過`textContent`屬性來設置`p`標簽的文本內容。最后，我們將這個`p`標簽添加到名為`products-container`的元素中。 上述的例子展示了如何將JSON字符串轉為JavaScript對象，并在網頁上展示其中的數據。當然，我們也可以將JSON字符串轉為JavaScript數組。只需要將`JSON.parse()`方法的返回值直接賦值給一個數組變量即可。下面是一個例子： ```javascript var jsonString = '[1, 2, 3, 4, 5]'; var jsonArray = JSON.parse(jsonString); ``` 上述代碼將一個包含五個元素的JSON數組字符串轉為了JavaScript數組。 在本文中，我們通過舉例說明了如何使用Ajax請求來獲取JSON數據，并將其轉為JavaScript對象或數組。這是在前端開發中非常常見的操作。通過靈活運用`JSON.parse()`方法，我們可以輕松地處理服務器返回的JSON數據，并將其展示在網頁上。希望本文能對您在前端開發中的工作有所幫助。