json转换对象和字符串,实例解析

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: json转换对象和字符串,实例解析

是ES5.1出来的

JSON.stringify() 转为字符串

JSON.parse() 解析json

json的标准写法

1.只能用双引号

2.所有的名字都必须用引号包起来

实例:

<body>
  <div id="result"></div>
  <script>
    const result =document.getElementById('result')
    // 绑定键盘按下事件
    window.onkeydown = function(){
      // 发送请求
      const xhr = new XMLHttpRequest();
      // 设置响应体数据的类型,设置这个可以自动转化
      xhr.responseType = 'json';
      // 初始化
      xhr.open('GET','http://127.0.0.1:8000/json-server'); 
      // 发送
      xhr.send();
      // 事件绑定
      xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
          if(xhr.status>=200 && xhr.status < 300){
            //
            // console.log(xhr.response);
            // result.innerHTML = xhr.response;
            // 手动对数据转化
            // 将字符串转换为对象,JSON.parse()ie8及以下不支持
                // 但是可以用json2.js这个框架来兼容,百度查
            // let data = JSON.parse(xhr.response);
            // console.log(data);
            // result.innerHTML = data.name
            // 自动转换
            console.log(xhr.response);
            result.innerHTML = xhr.response.name 
          }
        }
      }
    }
  </script>
</body>
服务端
// JSON响应
app.all('/json-server', (request, response) => {
  // 设置响应头    设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 响应头
  response.setHeader('Access-Control-Allow-Headers', '*');
  //响应一个数据
  const data = {
    name: 'atguigu'
  };
  // 进行字符串的转换
  let str = JSON.stringify(data);
  //设置响应体
  response.send(str)
});
相关文章
|
1月前
|
存储 负载均衡 监控
数据库多实例的深入解析
【10月更文挑战第24天】数据库多实例是一种重要的数据库架构方式,它为数据库的高效运行和灵活管理提供了多种优势。在实际应用中,需要根据具体的业务需求和技术环境,合理选择和配置多实例,以充分发挥其优势,提高数据库系统的性能和可靠性。随着技术的不断发展和进步,数据库多实例技术也将不断完善和创新,为数据库管理带来更多的可能性和便利。
96 57
|
7天前
|
SQL Java 数据库连接
canal-starter 监听解析 storeValue 不一样,同样的sql 一个在mybatis执行 一个在数据库操作,导致解析不出正确对象
canal-starter 监听解析 storeValue 不一样,同样的sql 一个在mybatis执行 一个在数据库操作,导致解析不出正确对象
|
2月前
|
XML 数据格式
HTML 实例解析
本文介绍了HTML中常见元素的使用方法,包括`&lt;p&gt;`、`&lt;body&gt;`和`&lt;html&gt;`等。详细解析了这些元素的结构和作用,并强调了正确使用结束标签的重要性。此外,还提到了空元素的使用及大小写标签的规范。
|
2月前
|
存储 编译器 C语言
C++类与对象深度解析(一):从抽象到实践的全面入门指南
C++类与对象深度解析(一):从抽象到实践的全面入门指南
50 8
|
2月前
|
Python
深入解析 Python 中的对象创建与初始化:__new__ 与 __init__ 方法
深入解析 Python 中的对象创建与初始化:__new__ 与 __init__ 方法
19 1
|
2月前
|
JSON 前端开发 JavaScript
json字符串如何转为list对象?
json字符串如何转为list对象?
279 7
|
2月前
|
JSON JavaScript 前端开发
js如何格式化一个JSON对象?
js如何格式化一个JSON对象?
93 3
|
2月前
|
数据可视化 Python
Python绘制基频曲线——实例解析与应用探讨
Python绘制基频曲线——实例解析与应用探讨
|
15天前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
45 2
|
2月前
|
缓存 Java 程序员
Map - LinkedHashSet&Map源码解析
Map - LinkedHashSet&Map源码解析
70 0

推荐镜像

更多