原生ajax响应json数据

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

原生ajax响应json数据相关推荐

学习AJAX必知必会（2）~Ajax基本使用，设置请求行、请求体、请求头，服务端响应JSON数据
一.Ajax的基本使用 1.核心对象 XMLHttpRequest,AJAX 的所有操作都是通过该对象进行的. 2.发送ajax请求(4个步骤): 创建xhr对象,然后open方法初始化,设置请求方式 ...
Ajax响应处理数据的三种格式（主要使用gson包）
Ajax响应处理数据的三种格式 A.普通文本(重点)后台:sevletresp.getWriter().print("Ajax响应成功");前台:jspvar text= xhr. ...
SpringMVC的响应JSON数据和过滤静态资源
1.过滤静态资源 @ResponseBody注解作用作用:将方法的返回值,以特定的格式写入到response的body区域,进而将数据返回给客户端. 当方法上面没有写ResponseBody,底层会 ...
ajax如何传递josn数据,jq之ajax以及json数据传递
闭包演示 function transfer(){ var dat = $( "#sel" ).val(); //console.log(dat) $.ajax({ type:&q ...
ajax写入json数据格式化,java ajax解析json数据格式化
java ajax解析json数据格式化 [2021-02-01 23:35:58] 简介: 服务器 hadoop格式化HDFS出现错误解决办法报错信息: host:java.net.Unknow ...
Ajax 获取 JSON数据
文章目录 Ajax获取JSON数据 Ajax获取JSON数据 Ajax 全称"Asynchronous JavaScript and XML",译为"异步 JavaScr ...
AngularJS学习笔记（3）——通过Ajax获取JSON数据
通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
boke例子： freermarker：在使用ajax传递json数据的时候多出冒号
boke例子: freermarker:在使用ajax传递json数据的时候多出冒号 json数据是用JSON.stringify()格式化的数据,然后用ajax传递,发现数据多出一个冒号:, 后来度 ...
如何通过SpringMVC框架响应JSON数据
1. 通过SpringMVC框架响应JSON数据在SpringMVC框架(含SpringBoot框架)中,当处理请求的方法之前添加了@ResponseBody后,或在控制器类之前使用的是@RestC ...
jQuery、ajax添加Json数据
需求说明: 简单的演示ajax提交json数据. 代码说明: ajax在传输数据的时候基本格式大都是固定的,只需要修改传输类型即可.下面介绍基本的参数提交. 步骤一:建立一个html或者jsp页面,引 ...

原生ajax响应json数据

1.手动转换

2.自动转换

原生ajax响应json数据相关推荐

最新文章

热门文章