Ajax根据接口信息的关于json格式的解析
先来简单了解一下json格式
一 JSON构建于两种结构:
- "名称/值"对的集合(A collection of name/value pairs).在不同的语言中被理解为对象(Object),记录(Records),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者是关联数组(associative array)
- 值得有序列表(An ordered list of values),在大部分语言中被理解为数据(array)
二 JSON的形式
- 对象
对象是一个无序的"'名称/值'对"集合.一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
2. 数组
数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间间使用“,”（逗号）分隔。
三 值的内容
值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。
字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。
字符串（string）与C或者Java的字符串非常相似。
数值（number）也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。
这里我们用获取村民信息作为简单案例。
如果我们想得到像如下图所示的信息
在学习过HTML和css之后，我们可以利用<tr>以及<th>标签对实现，这样的方法是直接写在HTML代码中的死信息，并且如果对象很多的话，会让代码变得冗长，后续修改也非常费劲，不足以支撑我们后续较高级的应用 ，所以接下来我们用php代码进行数组循环（真正使用的时候是需要从数据库获取信息的），并且返回的数据格式，我们把他定为JSON格式。
这里我们先给定几个接口的数据：
作用：返回村民的信息
请求类型：get请求
返回的数据格式：json格式
参数：无
下面是HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取村民信息</title>
<style>
div{
width: 800px;
margin: 20px auto;
}
table{
width: 800px;
margin: 20px auto;
border-collapse: collapse;
}
th{
background-color: #0094ff;
color:white;
font-size: 16px;
padding: 5px;
text-align: center;
border: 1px solid black;
}
td{
padding: 5px;
text-align: center;
border: 1px solid black;
}
</style>
<script type="text/javascript">
window.onload = function(){
var xhr = new XMLHttpRequest();
xhr.open("get","地址",true);
//无参数
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//只要接口要求不是xml格式，全都用Text
var result = xhr.responseText;
//由对象转换为数组
result = JSON.parse(result);
var newHtml = document.getElementById("wellfancy").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>";
newHtml += tempHtml;
}
document.getElementById("wellfancy").innerHTML = newHtml;
}
}
};
};
</script>
</head>
<body>
<div>
<table id="wellfancy">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</table>
</div>
</body>
</html>利用给定的get请求获取的php代码：
<?php
$arr = array();
$arr[0] = array("name"=>"刘能","age"=>"50","sex"=>"男");
$arr[1] = array("name"=>"赵四","age"=>"51","sex"=>"男");
$arr[2] = array("name"=>"王大拿","age"=>"60","sex"=>"男");
$arr[3] = array("name"=>"谢大脚","age"=>"45","sex"=>"女");
echo json_encode($arr);
?>
注意返回的参数和类型也要根据接口所给要求使用