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

最新推荐文章于 2024-09-13 09:42:31 发布

前端老实人

最新推荐文章于 2024-09-13 09:42:31 发布

阅读量374

点赞数 2

分类专栏： JavaScript 文章标签： javascript vue.js json node.js ajax

本文链接：https://blog.csdn.net/weixin_52691965/article/details/119031821

版权

JavaScript 专栏收录该内容

20 篇文章 4 订阅

订阅专栏

是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)
});