您的位置：首页 > Web前端 > JavaScript

通过ajax获得json并解析

2020-03-28 20:05 211 查看

一、在开始前做一些说明

虽然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>
  • 点赞
  • 收藏
  • 分享
  • 文章举报
翻斗幼儿园的胡图图 发布了36 篇原创文章 · 获赞 0 · 访问量 561 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航