通过ajax获得json并解析

最新推荐文章于 2024-07-13 09:14:19 发布

laluneX

最新推荐文章于 2024-07-13 09:14:19 发布

阅读量298

点赞数

分类专栏： XML与JSON与AJAX 文章标签： json javascript ajax js

本文链接：https://blog.csdn.net/weixin_45969777/article/details/105004284

版权

XML与JSON与AJAX 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、在开始前做一些说明

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

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

var JSONo1='{"uname":"李明","age":"20","gender":"male"}';	//必须是字符串，且里面的内容必须用双引号（单引号不行）
            console.log(JSONo1);					//字符串
            console.log(JSON.parse(JSONo1));		//这个是一个对象
            console.log(JSON.stringify(JSON.parse(JSONo1))); 	//字符串

            var JSONo2='["soccer","basketball"]';
            console.log(JSONo2);					//字符串
            console.log(JSON.parse(JSONo2));		//数组
            console.log(JSON.stringify(JSON.parse(JSONo2)));	//字符串
            
var JSONo3='{"uname":"李明","age":"20","gender":"male","hobbies":["soccer","basketball","baseball"]}';
            console.log(JSONo3);					//字符串
            console.log(JSON.parse(JSONo3));		//对象
            console.log(JSON.stringify(JSON.parse(JSONo3)));//字符串

            var JSONo4='["soccer","basketball",{"uname":"李明","age":"20","gender":"male"}]';
            console.log(JSONo4);				//字符串
            console.log(JSON.parse(JSONo4));	//数组
            console.log(JSON.stringify(JSON.parse(JSONo4)));//字符串

			var dom=$("<div>你好</div>")		//把字符串转为jQuery对象

二、具体实现

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>