ajax 第六節 json資料回撥手動轉換 與 自動轉換
阿新 • • 發佈：2021-11-04
＝＝＝＝＝＝＝＝＝＝＝＝手動轉換＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AJAX POST 請求</title> <style> #result { width: 200px; height: 100px; border: solid 1px red; } </style> </head>
<body> <div id="result"></div> </body> <script> const result = document.getElementById('result'); window.onkeydown = function () { const xhr = new XMLHttpRequest(); xhr.open('GET', 'http://127.0.0.1:8000/json-server') xhr.send() xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status < 300) { let data = JSON.parse(xhr.response); console.log(data); result.innerHTML = data.name } } } } </script>
</html> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝自動轉換＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AJAX POST 請求</title> <style> #result { width: 200px; height: 100px; border: solid 1px red; } </style> </head>
<body> <div id="result"></div> </body> <script> const result = document.getElementById('result'); window.onkeydown = function () { const xhr = new XMLHttpRequest(); xhr.responseType = 'json' xhr.open('GET', 'http://127.0.0.1:8000/json-server'); xhr.send(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status < 300) { console.log(xhr.response); result.innerHTML = xhr.response.name } } } } </script> </html> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝server.js ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ //引用 express const { request, response, json } = require('express'); const express = require('express');
//建立應用物件 const app = express();
//建立路由規則， // request 是對請求報文的封裝 // response 是對響應報文的封裝 //app.all 可以接收任意型別的請求頭 app.get('/json-server', (request, response) => { //設定響應頭，設定充許跨域 response.setHeader('Access-Control-Allow-Origin', '*'); const data = { name: 'username', } let str = JSON.stringify(data);
response.send(str); }) // 監聽埠啟動服務 app.listen(8000, () => { console.log('服務已經啟動,8000埠監聽中.......'); })