原生ajax响应json数据

仰望星空的快乐

已于 2022-04-17 13:27:19 修改

阅读量1k

点赞数

分类专栏： ajax 文章标签： ajax

于 2022-04-16 01:24:21 首次发布

本文链接：https://blog.csdn.net/sharesb/article/details/124207082

版权

ajax 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

JSON.stringify(data) 将data 转换为json格式

如果data 是数组格式则转换之后为[1,12,3]

如果data是一个类则转换之后为 {"name":"hxyt"}

app.all('/json-server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    // 接受所有请求的头信息
    response.setHeader('Access-Control-Allow-headers','*');
    const data ={
        name:'hxyt'
    };
    const data2=[1,12,3];
    let str2=JSON.stringify(data2);
    let str =JSON.stringify(data);
    // 设置响应
    response.send(str+str2);
});

<!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>
</head>
<body>
    <textarea id="textarea">
    </textarea>
</body>
</html>
<script>
    window.onclick=function()
    {    const textarea=document.getElementById("textarea");
        const xhr=new XMLHttpRequest();
        xhr.open('POST','http://127.0.0.1:8000/json-server');
        xhr.send();
        xhr.onreadystatechange=function(){
            if(xhr.status===4){
                if(xhr.status>200&&xhr.status<300){
                    console.log(xhr.status);
                }
            }
            textarea.innerHTML=xhr.response;
            console.log(xhr.response);
        }    
    }
</script>

执行结果

要把json格式转换为数据原来的格式，有两种方法

1.手动转换

  let data=JSON.parse(xhr.response);

 textarea.innerHTML=data.name;

<!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>
</head>
<body>
    <textarea id="textarea">
    </textarea>
</body>
</html>
<script>
    window.onclick=function()
    {    const textarea=document.getElementById("textarea");
        const xhr=new XMLHttpRequest();
        xhr.open('POST','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);
                    textarea.innerHTML=data.name;
                
                }
            }
           
        }    
    }
</script>

2.自动转换

// 自动转换，设置响应体数据的类型

xhr.responseType='json';

//自动转换

textarea.innerHTML=xhr.response.name;

<!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>
</head>
<body>
    <textarea id="textarea">
    </textarea>
</body>
</html>
<script>
    window.onclick=function()
    {    const textarea=document.getElementById("textarea");
        const xhr=new XMLHttpRequest();
        // 自动转换，拿到响应值之后会自动转为json格式
        xhr.responseType='json';
        xhr.open('POST','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);
                    // textarea.innerHTML=data.name;
                    //自动转换
                    textarea.innerHTML=xhr.response.name;
                }
            }
           
        }    
    }
</script>

https://gitee.com/rjgc1192/ajax/commit/5e3302cfcc388d30ac696950fbc4128fba8c8a83

版本5e3302cf