通过ajax获得json并解析

约定不等于承诺〃 2023-07-17 11:29 38阅读 0赞

# 一、在开始前做一些说明 #

**虽然json方式和xml方式可以达到相同的效果，但是在现在json使用更多一些，因为大多数的语言都有对应的json的接口，并且json比xml更简单一点。介绍一些json的函数。**

> JSON.parse(字符串)可以把JSON字符串转化为对象  
> JSON.stringify(对象)可以把对象转化为JSON字符串

# 二、具体实现 #

json文件

{ 
      "uname":"李明",
      "age":"20",
      "gender":"male",
      "hobbies":["soccer","basketball","baseball"]
    }

php文件

<?php
        header('Content-type:application/json','charset=utf-8');	//告诉浏览器传回来的数据是json类型
        $json=file_get_contents('./aaa.json');		//读取json文件
    
        echo $json;									//输出字符串

html文件

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        <body>
            <button>点我</button>
            <script>
                var btn=document.querySelector('button');
                btn.addEventListener('click',function () { 
                    var xhr=new XMLHttpRequest();		//创建异步对象
                    xhr.open('get','test03.php');
                    xhr.send(null);
                    xhr.addEventListener('readystatechange',function () { 
                        if (xhr.status==200&&xhr.readyState==4){ 
                            var o=JSON.parse(xhr.responseText);		//转化为对象
                            console.log(o.uname);		//使用对象的方法去得到结果
                            console.log(o['age']);
                            console.log(o.gender);
                            console.log(o.hobbies);
                        }
                    })
                });
            </script>
        </body>
    </html>

本文只用于个人学习和记录