一.JSON与XML的区别比较
JSON 与 XML 的相同之处:
1.JSON 和 XML 数据都是 "自我描述" ,都易于理解。
2.JSON 和 XML 数据都是有层次的结构
3.JSON 和 XML 数据可以被大多数编程语言使用
JSON 与 XML 的不同之处:
1.JSON 不需要结束标签
2.JSON 更加简短
3.JSON 读写速度更快
4.JSON 可以使用数组
1.PHP创建json数据
<?php
header('content-type:application/json;charset=utf8'); //响应头信息,识别为json文件
$arr=array(
array(
"name"=>"张三",
"age"=>"20",
"sex"=>"男",
),
array(
"name"=>"李四",
"age"=>"21",
"sex"=>"女",
),
array(
"name"=>"王五",
"age"=>"30",
"sex"=>"男",
)
);
// $result=array("status"=> 1,"data"=>$arr,"msg"=>"获取商品信息成功");
// $json=json_encode($result);
$json=json_encode($arr);//json_encode:将数值转换成json数据存储格式
echo $json;
2.使用ajax解析json文件
注意点:
result=JSON.parse(result);//将json转换为数组对象
思路:
1.用ajax获取到后台json数据
2.利用JSON.parse(result)方法将json转换为数组对象
3.for循环输出数组
4.创建tempHtml构建表格
5.创建newHtml容器存储每一次循环temphtml的结果,最后输出
结果
代码
1.parsingJson.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>json解析</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
table {
margin: auto;
border-spacing: 0px;
text-align: center;
margin-top: 30px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var table_json=document.getElementById("table_json");
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open('get', 'parsingJson.php', true);
xhr.send(null);
xhr.onreadystatechange = function() {
// xhr.status服务器访问状态,xhr.readyState 数据解析
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var result = xhr.responseText;
result=JSON.parse(result);//将json转换为数组对象
var newHtml=table_json.innerHTML;//定义容器存储表格内容
for(var i=0;i<result.length;i++){
var item=result[i];
var name=item.name;
var sex=item.sex;
var age=item.age;
// console.log(name,sex,age);
var tempHtml="<tr><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td><tr>";
console.log(tempHtml);
newHtml+=tempHtml;//通过累加器存储
}
table_json.innerHTML=newHtml;
}
}
}
}
</script>
</head>
<body>
<h1 align="center">学生信息表</h1>
<table id="table_json" border="1" width="500px" align="center">
<tr bgcolor="skyblue">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
</table>
</body>
</html>
2.parsingJson.php
<?php
header('content-type:application/json;charset=utf8'); //响应头信息,识别为json文件
$arr=array(
array(
"name"=>"张三",
"age"=>"20",
"sex"=>"男",
),
array(
"name"=>"李四",
"age"=>"21",
"sex"=>"女",
),
array(
"name"=>"王五",
"age"=>"30",
"sex"=>"男",
)
);
$json=json_encode($arr);//json_encode:将数值转换成json数据存储格式
echo $json;