h5 如何讀取 json 串

在前端開發中，經常需要通過網絡請求獲取 JSON 數據并處理。H5 提供了一系列 API 來讀取 JSON 串，其中最常用的有兩種方法：使用 XMLHttpRequest 對象進行異步請求獲取 JSON 數據和使用 Fetch API 進行異步請求獲取 JSON 數據。

使用 XMLHttpRequest 獲取 JSON 數據

下面是使用 XMLHttpRequest 對象進行異步請求獲取 JSON 數據的示例代碼：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json', true);
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
else {
console.log('Request failed.  Returned status of ' + xhr.status);
}
};
xhr.send();

以上代碼首先創建了一個 XMLHttpRequest 的實例，使用 open() 方法設置請求的 URL 和請求方式，并通過 onload 回調函數獲取響應數據。

在 onload 回調函數中，通過判斷請求的響應狀態碼確定是否請求成功，然后使用 JSON.parse() 方法將響應數據轉換為 JavaScript 對象。最后通過 console.log() 方法打印響應數據。

使用 Fetch API 獲取 JSON 數據

下面是使用 Fetch API 進行異步請求獲取 JSON 數據的示例代碼：

fetch('https://example.com/data.json')
.then(response =>response.json())
.then(data =>console.log(data))
.catch(error =>console.error(error))

以上代碼使用 fetch() 方法進行異步請求，并通過 .json() 方法將響應數據轉換為 JavaScript 對象。然后通過 .then() 方法獲取處理后的數據并打印到控制臺中。如果發生錯誤則通過 .catch() 方法捕獲錯誤并打印到控制臺。

JSON 數據的處理

獲取 JSON 數據后，可以對其進行處理。下面是一些常用的處理方法：

• 獲取屬性值：使用對象的屬性訪問器獲取屬性值，例如 data.name。
• 添加屬性：使用對象的屬性賦值器添加屬性，例如 data.age = 18。
• 刪除屬性：使用 delete 關鍵字刪除屬性，例如 delete data.name。
• 遍歷屬性：使用 for...in 循環遍歷對象的屬性，例如 for (var key in data) {}。

以上就是 H5 讀取 JSON 串的方法和常用處理方法，希望對您有所幫助。