JSON是一种数据格式,不属于任何语言,因而它可在不同语言之间进行传递,但是JSON有简单值、对象、数组三种类型的值,而每个语言对对象和数组的表示语法都不相同,那如何实现JSON中的数据在不同语言之间传递呢。
字符串在任何语言中的表示语法都是相同的(至少绝大多数吧…),都是用引号包裹起来的,因此可以将JSON转换成字符串。然后不同的语言有不同的JSON解析器函数,如JS中JSON.parse(str)即可把JSON格式的字符串str转换成有用的JS对象,从而使数据在网页进行显示或操作等;相反,将JS对象转换成JSON格式的字符串这一过程称为序列化,相应函数为JSON.stringify(obj)。
另外,如果字符串不是有效的JSON,JSON.parse(str)会抛出错误,这点在传输数据时需注意,如
str=
“height”,会报错,此时不需要转换即是所得数据
“‘height’”,仍会报错,因为JSON里任何字符串都必须是双引号!(包括对象属性)
‘“height”’,正确
‘{“name”:”Wayne”,”age”:18}’,正确
好了,开始传输数据,目前尚不会数据库,模拟JSON为数据库中的数据,简单写个PHP文件获取JSON数据,如下:
<?php
// 指定文档类型
// 可以不指定
header('Content-Type: application/json; charset=utf-8');
// 1、PHP连接数据库、读取数据
// 2、一般情况下会将读取的数据转成数组
// 3、需要通过json_encode() 来转成json
// 4、可以将json数据echo,返回给js 或其它语言
$result = file_get_contents('stars.json');
echo $result;
?>
JSON文件:
[
{
"name": "王力宏",
"photo": "./images/wlh.jpg",
"ablum": "<<改变自已>>",
"age": 39,
"sex": "男"
},
{
"name": "王力宏",
"photo": "./images/wlh.jpg",
"ablum": "<<改变自已>>",
"age": 39,
"sex": "男"
},
{
"name": "王力宏",
"photo": "./images/wlh.jpg",
"ablum": "<<改变自已>>",
"age": 39,
"sex": "男"
},
{
"name": "王力宏",
"photo": "./images/wlh.jpg",
"ablum": "<<改变自已>>",
"age": 39,
"sex": "男"
}
]
接下来就是在html页面中进行AJAX编程获取数据了(这里就不详细介绍执行过程了,网上书上一堆):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON</title>
<style>
table {
width: 800px;
border-collapse: collapse;
}
td {
height: 40px;
text-align: center;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<table>
</table>
<div class="btn"><input type="button" value="获取数据"></div>
<script>
var btn = document.querySelector('.btn');
btn.onclick = function () {
var xhr = new XMLHttpRequest;
xhr.open('get', 'stars.php');
xhr.send(null);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
result = JSON.parse(result);
console.log(result);
var html = '';
for(var i=0; i<result.length; i++) {
html += '<tr>';
html += '<td>' + result[i].name + '</td>';
html += '<td>' + result[i].age + '</td>';
html += '<td>' + result[i].sex + '</td>';
html += '<td>' + result[i].photo + '</td>';
html += '<td>' + result[i].ablum + '</td>';
html += '</tr>';
}
document.querySelector('table').innerHTML = html;
}
}
}
</script>
</body>
</html>
结果如下:
当然,能实现这些功能的前提是得给自己电脑配个服务器环境…然后通过自己创建的域名打开网页而不是本地打开,推荐使用wamp这个软件。
更多推荐
HTML文件、PHP文件、JSON文件之间通过AJAX编程简单传递数据
发布评论