AJAX服务端响应JSON

最新推荐文章于 2024-05-26 16:29:46 发布

林之.

最新推荐文章于 2024-05-26 16:29:46 发布

阅读量202

点赞数

分类专栏：前端学习文章标签：前端 ajax

本文链接：https://blog.csdn.net/m0_51144154/article/details/121423602

版权

前端学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

AJAX服务端响应JSON

服务端代码：

//1.引入express
const express = require('express');

//2.创建应用对象
const app = express();

//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server', (request, response) => {
//'/server'就相当于一个url

    //设置响应头、设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    
    //设置响应体
    response.send('HELLO AJAX')
});

app.post('/server', (request, response) => {
    //'/server'就相当于一个url
    
        //设置响应头、设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
        
        //设置响应体
        response.send('HELLO AJAX POST')
});
    

app.all('/json-server', (request, response) => {
    //'/server'就相当于一个url
    
        //设置响应头、设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
        //设置响应头允许一切头的响应
    // response.setHeader('Access-Control-Allow-Headers', '*')
    
    //响应一个数据
    const data = {
        name:'adida',
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);

    });


//4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务器已经启动，8000端口监听中...')
})

前端代码

<!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>Document</title>
    <style>
        #result{
            width:200px;
            height:200px;
            border: solid 1px red;
        }
    </style>
</head>
<body>
    <div id = 'result'></div>
</body>
<script>
    //获取result事件用于后面
    const result = document.getElementById('result');
    //绑定键盘按下事件
    window.onkeydown = function(){
        //创建一个XMLHttpRequest对象
        const xhr = new XMLHttpRequest();
        //设置自动转换
        xhr.responseType = 'json'
        //初始化调用open方法打开链接
        xhr.open('GET','http://127.0.0.1:8000/json-server');
        //调用发送请求方法
        xhr.send();
        //监听状态的改变
        xhr.onreadystatechange = function(){
            //判断状态值
            if(xhr.readyState === 4){
                //判断状态码
                if(xhr.status>=200 & status<=300){
                    result.innerHTML = xhr.response;
                    //手动对JSON数据进行转换
                    //let data = JSON.parse(xhr.response);
                      //console.log(data);
                      //result.innerHTML = data.name
                }
            }
        }

    }
</script>
</html>

如果不对请求的json对象进行转换我们在前端会得到如下结果

对json字符串可以进行转换有：①手动转换和 ②自动转换两种方式
1). 手动转换：插入如下代码

let data = JSON.parse(xhr.response);
console.log(data);
result.innerHTML = data.name

      2)自动转换(借助xhr对象上的一个属性来实现)
  在创建完xhr对象后的头部插入这个代码即可

xhr.responseType = 'json'

林之.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录