服務器返回JSON格式數據 · 學習AJAX

[TOC] >[success] # 服務器返回JSON格式數據 <br/> ~~~ '.json文件'不需要在最外面加'單引號'，因為'json文件'就是'字符串'格式的，但是里面的內容需要加'雙引號' ~~~ <br/> [xmind文件下載，提取碼：ia8s](https://pan.baidu.com/s/1o_6258JsHC-IY7SDTF0PZA) ![](https://img.kancloud.cn/49/15/4915288f8bf5d62d4ba8d55b996fbe41_1412x338.png) <br/> >[success] ## 簡單的JSON格式數據解析 <br/> 下面是一種常見的簡單的JSON文件結構解析方法 <br/> >[success] ### 前端代碼 <br/> 1. index.html ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> window.onload = function () { // 點擊獲取JSON數據 document.querySelector('input').onclick = function () { // 1. 創建異步對象 var xhr = new XMLHttpRequest(); // 2. 設置請求行 xhr.open('post', 'backJSON.php'); // 3. 設置請求頭(get請求可以省略，post不傳參數也可以不寫) // 4. 注冊狀態改變事件 xhr.onreadystatechange = function () { // 4.1 判斷狀態&請求是否成功并使用數據 if (xhr.readyState == 4 && xhr.status == 200) { // JSON的載體是字符串，用responseText即可獲取數據 console.log(xhr.responseText) // 轉換為對應的對象或者數組 var arr = JSON.parse(xhr.responseText) // 遍歷打印數據 for (var i = 0; i < arr.length; i++) { var currentObj = arr[i] console.log('姓名：' + currentObj.name + '技能：' + currentObj.skill) } } } // 5. 發送請求 xhr.send(null); } } </script> </head> <body> <input type="button" value="獲取JSON格式的數據"> </body> </html> ~~~ <br/> >[success] ### 后端代碼 <br/> 1. backJSON.php ~~~ <?php // JSON也要設置一段內容（可選）,這里是http協議里面的內容 header('content-type:application/json;charset=utf-8'); // 讀取JSON文件 $jsonString = file_get_contents('./stars.json'); // 返回讀取的內容 echo $jsonString; ?> ~~~ 2. stars.json ~~~ [ { "name": "吳京", "skill": "徒手抓狼" }, { "name": "吳彥祖", "skill": "帥氣" }, { "name": "張國榮", "skill": "霸王別姬" }, { "name": "林俊杰", "skill": "小酒窩" } ] ~~~