ajax解析JSON

最新推荐文章于 2023-03-02 10:59:40 发布

Binglili0809

最新推荐文章于 2023-03-02 10:59:40 发布

阅读量309

点赞数

本文链接：https://blog.csdn.net/Binglili0809/article/details/108366072

版权

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <input type="button" value='获取JSON格式的数据'>
</body>

</html>
<script>
  // 点击时候获取
  document.querySelector('input').onclick = function () {
    //1.创建异步对象
    var xhr = new XMLHttpRequest();
    //2.设置请求行
    xhr.open('post', 'backJSON.php');
    //3.设置请求头(get请求可以省略)
    //4.注册状态改变事件
    xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText);//字符串

        var arrObj = JSON.parse(xhr.responseText);//转化为数组
        for(var i = 0; i < arrObj.length; i++){
          console.log('姓名：'+ arrObj[i].name +'  特点：' + arrObj[i].skill);
        }
      }
    }
    //5.发送请求
    xhr.send(null);
  }


</script>

<?php
  // JSON也要设置一段内容 (可选 可写可不写)
  // 告诉浏览器 返回的是 JSON格式的数据 编码是 utf-8
  header('content-type:application/json;charset=utf-8');

  // 读取JSON文件
  $jsonString = file_get_contents('data/stars.json');

  // 返回读取的内容
  echo $jsonString;
?>

[{
    "name": "吴京",
    "skill": "徒手抓狼"
  },
  {
    "name": "吴彦祖",
    "skill": "帅气"
  },
  {
    "name": "张国荣",
    "skill": "霸王别姬"
  },
  {
    "name": "林俊杰",
    "skill": "小酒窝--美美哒"
  }
]

Binglili0809

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax解析JSON

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>title</title></head><body> <input type="button" value='获取JSON格式的数据'></body></html><script> // 点
复制链接

扫一扫