原生ajax响应json数据_xhr.responsejson-程序员宅基地
技术标签： ajax
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
智能推荐
工作流引擎 Activiti 入门详解-程序员宅基地
文章浏览阅读682次，点赞2次，收藏3次。点击关注公众号，利用碎片时间学习1. 什么是工作流1.1 工作流介绍工作流(Workflow)，就是通过计算机对业务流程自动化执行管理。它主要解决的是“使在多个参与者之间按照某种预定义的规则自动进行传递文档、信息或任务的过程，从而实现某个预期的业务目标，或者促使此目标的实现”。1.2 工作流系统什么是工作流系统具有工作流程功能的软件系统。用于更好的管理业务流程。适用行业，..._activity工作流入门
【docker设置host】docker镜像设置hosts_docker hosts-程序员宅基地
文章浏览阅读1.1w次，点赞2次，收藏11次。hosts文件其实并不是存储在Docker镜像中的，/etc/hosts, /etc/resolv.conf和/etc/hostname，是存在主机上的/var/lib/docker/containers/(docker_id)目录下，容器启动时是通过mount将这些文件挂载到容器内部的。因此如果在容器中修改这些文件，修改部分不会存在于容器的top layer，而是直接写入这3个文件中。_docker hosts
springboot中，pom文件resources配置覆盖原有路径下已存在的文件_pom文件resource标签下的路径配置-程序员宅基地
文章浏览阅读1.1k次。如上两个resource节点中，第一个resource表示resources包下所有文件打进包中，第二个节点表示env目录下，根据打包指定的-P参数来选择env下的具体环境配置，把对应环境配置打包jar包中，但是如果env中的目录或者文件已存在于第一个resource节点的配置的resources中，则第二个resource节点需要配上<filtering>true</filtering>的标签，表示如果文件有重复，则以该节点下配置的文件为准，覆盖原有的文件......_pom文件resource标签下的路径配置
[渝粤教育] 西北工业大学 理论力学 参考 资料_关于ab杆的受力图,下列画法正确的是-程序员宅基地
文章浏览阅读4.4k次。教育-理论力学-章节资料考试资料-西北工业大学【】第一章测验1、【单选题】两个力，它们的大小相等、方向相反和作用线沿同一直线。这是A、它们作用在物体系统上，使之处于平衡的必要和充分条件；B、它们作用在刚体系统上，使之处于平衡的必要和充分条件；C、它们作用在刚体上，使之处于平衡的必要条件，但不是充分条件；D、它们作用在变形体上，使之处于平衡的必要条件，但不是充分条件。参考资料【 】2、【单选题】作用在同一刚体上的两个力F1和F2，若 F1 = -F2，则表明这两个力A、必处于平衡；_关于ab杆的受力图,下列画法正确的是
linux mysql 集群搭建_MySQL分布式集群搭建-程序员宅基地
文章浏览阅读998次。1、准备集群搭建环境使用6台虚拟机来搭建MySQL集群，相应的实验环境与对应的MYSQL节点之间的对应关系如下图所示：节点名称节点IP节点内存节点硬盘大小节点CPUMYSQL节点角色Ubuntu-1192.168.1.26768M20G30%管理节点(MGM)Ubuntu-2192.168.1.27768M10G30%数据节点(NDB)Ubuntu-3192.168.1.28768M10G30%数..._linux 搭建mysql集群
我的一点企业上云经验-程序员宅基地
文章浏览阅读1.2k次。作者按：日前，工信部印发《推动企业上云实施指南（2018—2020年）》，其中指出：到2020年，力争实现企业上云环境进一步优化，行业企业上云意识和积极性明显提高，上云比例和应用深度显著提升，云计算在企业生产、经营、管理中的应用广泛普及，全国新增上云企业100万家，形成典型标杆应用案例100个以上，形成一批有影响力、带动力的云平台和企业上云体验中心。统计数字表明，当前传统企业用户“上云”的比例仅为..._上云生产项目
随便推点
Pycharm学生用户免费激活-程序员宅基地
文章浏览阅读1.3w次，点赞13次，收藏59次。Pycharm专业版_学生用户激活Pychram学生账户激活Free Educational Licenses填写申请人信息无法接受邮箱申请Pychram学生账户激活Free Educational LicensesFree Educational Licenses网址点击Apply now填写申请人信息填写个人信息，邮箱必须使用校园邮箱号，每个大学都有对应的邮箱帐号，可以去校园网自行申请点击申请免费产品无法接受邮箱申请如果出现无法接受电子邮件地址，点击蓝色的“官方文件”进行申请确认_pycharm学生
拓端tecdat|R语言：EM算法和高斯混合模型聚类的实现_r语言实现最大化聚类(em)算法中图形的绘制-程序员宅基地
文章浏览阅读436次。期望最大化（EM）算法是用于找到最大似然的或在统计模型参数，其中该模型依赖于未观察到的潜变量最大后验（MAP）估计的迭代方法。期望最大化（EM）可能是无监督学习最常用的算法。或者，如果我们有以厘米为单位的人的身高（男性和女性）的数据。高度遵循正常的分布，但男性（平均）比女性高，因此这表明两个高斯分布的混合模型。假设我们翻转硬币并得到以下内容 - 0,1,1,0,0,1,1,0,0,1。本文我们讨论期望最大化理论，应用和评估基于期望最大化的聚类。我们将使用mclust软件包附带的“糖尿病”数据。_r语言实现最大化聚类(em)算法中图形的绘制
Selenium的安装与卸载_卸载selenium-程序员宅基地
文章浏览阅读6.4k次，点赞3次，收藏5次。selenium _卸载selenium
Win10开启沙盒功能和使用_win10沙盒怎么共享电脑游戏-程序员宅基地
文章浏览阅读2.5k次。什么是沙盒？在计算机安全领域，（英语sandbox，又译为）是一种安全机制，为运行中的程序提供的隔离环境。通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用。沙盒通常严格控制其中的程序所能访问的资源，比如，沙盒可以提供用后即回收的磁盘及内存空间。在沙盒中，网络访问、对真实系统的访问、对输入设备的读取通常被禁止或是严格限制。从这个角度来说，沙盒属于的一种。沙盒中的所有改动对操作系统不会造成任何损失。通常，这种技术被计算机技术人员广泛用于测试可能带毒的程序或是其他的恶意代码。..._win10沙盒怎么共享电脑游戏
pads 生成gerber时提示 “没有该尺寸的符号:0.8- 所使用的符号: +”_pads没有该尺寸的符号-程序员宅基地
文章浏览阅读9.1k次。pads 生成gerber时提示 “没有该尺寸的符号:0.8- 所使用的符号: +”，什么原因呢？ 遇到这种情况怎么解决？还是忽略掉。 是因为我们使用的钻孔大小系统里面没有，就使用了系统里面自带的标号。 这个问题一般忽略他是没问题的。如果担心有问题，可以按照下面的方法解决他即可。 方法： 在File—>CAM中定义的各层中，选择drill drawing_pads没有该尺寸的符号
【话题】程序员的金三银四求职宝典-程序员宅基地
文章浏览阅读929次，点赞30次，收藏7次。对于程序员而言，金三银四的求职季确实是一个机遇与挑战并存的时期。