前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >什么是json,json转换对象和字符串,实例讲解

什么是json,json转换对象和字符串,实例讲解

原创
作者头像
玖柒的小窝
修改2021-09-30 10:18:32
9370
修改2021-09-30 10:18:32
举报
文章被收录于专栏:各类技术文章~

什么是 JSON?

  • json是ES5.1出来的
  • JSON 英文全称 JavaScript Object Notation
  • JSON 是一种轻量级的数据交换格式。
  • JSON是独立的语言
  • JSON 易于理解。

JSON 语法规则

  • 数据为 键/值 对。
  • 数据由逗号分隔。
  • 大括号保存对象
  • 方括号保存数组

JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对,就像 JavaScript 对象属性。

键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:

方法:

JSON.stringify() 转为字符串

JSON.parse() 解析json

json的标准写法

1.只能用双引号

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

实例:

代码语言:javascript
复制
<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)
});

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • JSON 语法规则
  • JSON 数据 - 一个名称对应一个值
  • 方法:
  • json的标准写法
  • 实例:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档