ajax中json响应
在实际工作当中我们向服务端发送请求，服务端返回来的大部分都是json格式的数据
本篇文章讲解的是怎么去处理json格式的数据
本次使用的按键为 下箭头
当按键盘按了 下箭头 按钮 则服务端返回数据
1.创建在testfive文件夹并在这个文件夹里面
2.创建json.html文件
3.创建server.js文件
案例一
制作一个
使用的按键为 下箭头
当按键盘按了 下箭头 按钮 则服务端返回数据
json.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="result" style="width: 300px;height: 200px;border: solid 2px teal;"></div>
<script>
// 一:获取元素对象
const textone = document.getElementById('result');
// 二:绑定键盘按下事件
window.onkeydown = function(){
// 测试打印
console.log("已经按下按键");
// 1.发送请求
const textone = new XMLHttpRequest();
// 2.初始化
textone.open('GET','http://127.0.0.1:8000/jsonserver');
// 3.发送
textone.send();
// 4.事件绑定
textone.onreadystatechange = function(){
if(textone.readyState === 4){
if(textone.status >= 200 && textone.status < 300){
// 测试打印
console.log(textone.response);
result.innerHTML = textone.response;
}
}
}
}
</script>
</body>
</html>
server.js文件
// 1. 引入express
const express = require('express');
// 2.创建对象
const app = express();
// 3.创建路由规则 里面的形参 request与response (自己可以随便定义名字的)
// 建议写成 request与response 因为可以见名思意，方便自己看
// request 对请求报文的封装
// responst 对响应报文的封装
// 请求路径为'/server'
// 当使用post请求时候会因为发送的信息没有收到对应的结果所以回报错
// 所以该处使用all 表示可以接收任意类型的请求 如get post 等等
app.all('/jsonserver', (request, response)=>{
// 设置响应头 设置允许跨域
// 头名字为Access-Control-Allow-Origin
// 头的值为
response.setHeader('Access-Control-Allow-Origin','*');
// 响应头 *号表示所有的头信息都可以接收
response.setHeader('Access-Control-Allow-Headers','*');
// 设置响应体
response.send('ALL接收成功');
});
// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{
console.log("服务已经启动，8000端口监听中......");
});
按下下箭头按键后返回数据
案例二
响应一个数据 把这个对象返回给浏览器
const data = {
name: 'dalaojun'
};
这个对象直接往response.send()里面放是不行的，因为send()里面只能放字符串和butfer(这个忘记了淦)
所以需要对对象进行字符串的转换
使用JSON.stringify()方法转换
server.js文件
// 1. 引入express
const express = require('express');
// 2.创建对象
const app = express();
// 3.创建路由规则 里面的形参 request与response (自己可以随便定义名字的)
// 建议写成 request与response 因为可以见名思意，方便自己看
// request 对请求报文的封装
// responst 对响应报文的封装
// 请求路径为'/server'
// 当使用post请求时候会因为发送的信息没有收到对应的结果所以回报错
// 所以该处使用all 表示可以接收任意类型的请求 如get post 等等
app.all('/jsonserver', (request, response)=>{
// 设置响应头 设置允许跨域
// 头名字为Access-Control-Allow-Origin
// 头的值为
response.setHeader('Access-Control-Allow-Origin','*');
// 响应头 *号表示所有的头信息都可以接收
response.setHeader('Access-Control-Allow-Headers','*');
// 响应一个数据 把这个对象返回给浏览器
const data = {
name: 'dalaojun'
};
// 对对象进行字符串转换
let str = JSON.stringify(data);
// 设置响应体
response.send(str);
});
// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{
console.log("服务已经启动，8000端口监听中......");
});
那么浏览器里面得到的就是这个对象转化为字符串格式的数据
案例三
前端里面把发送过来的字符串数据转化为对象
结果是一个JSON格式字符串
数据简单的我们获取里面的结果还是比较简单的，但是复杂的数据，想要提取里面其中的某个数据则会边的很麻烦
1.手动对数据进行一个转换
// 手动对数据转化
let data = JSON.parse(textone.response);
// 在控制台中打印
console.log(data);
// 把name的值显示在方框内
result.innerHTML = data.name;
json.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="result" style="width: 300px;height: 200px;border: solid 2px teal;"></div>
<script>
// 一:获取元素对象
const textone = document.getElementById('result');
// 二:绑定键盘按下事件
window.onkeydown = function(){
// 测试打印
console.log("已经按下按键");
// 1.发送请求
const textone = new XMLHttpRequest();
// 2.初始化
textone.open('GET','http://127.0.0.1:8000/jsonserver');
// 3.发送
textone.send();
// 4.事件绑定
textone.onreadystatechange = function(){
if(textone.readyState === 4){
if(textone.status >= 200 && textone.status < 300){
// 测试打印
// console.log(textone.response);
// result.innerHTML = textone.response;
// 手动对数据转化
let data = JSON.parse(textone.response);
// 在控制台中打印
console.log(data);
// 把name的值显示在方框内
result.innerHTML = data.name;
}
}
}
}
</script>
</body>
</html>
得到的结果为
2.使用自动转化
上方修改
// 自动转化
// 借助textone对象里面的属性来转化
// 设置响应体数据的类型
textone.responseType = 'json';
下方修改
// 使用自动转化
result.innerHTML = textone.response.name
json.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="result" style="width: 300px;height: 200px;border: solid 2px teal;"></div>
<script>
// 一:获取元素对象
const textone = document.getElementById('result');
// 二:绑定键盘按下事件
window.onkeydown = function(){
// 测试打印
console.log("已经按下按键");
// 1.发送请求
const textone = new XMLHttpRequest();
//
// 自动转化
// 借助textone对象里面的属性来转化
// 设置响应体数据的类型
textone.responseType = 'json';
// 2.初始化
textone.open('GET','http://127.0.0.1:8000/jsonserver');
// 3.发送
textone.send();
// 4.事件绑定
textone.onreadystatechange = function(){
if(textone.readyState === 4){
if(textone.status >= 200 && textone.status < 300){
// 测试打印
// console.log(textone.response);
// result.innerHTML = textone.response;
// 手动对数据转化
// let data = JSON.parse(textone.response);
// 在控制台中打印
// console.log(data);
// 把name的值显示在方框内
// result.innerHTML = data.name;
//
// 测试打印
console.log(textone.response);
// 使用自动转化
result.innerHTML = textone.response.name;
}
}
}
}
</script>
</body>
</html>