4、解析json数据文件

一.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的结果,最后输出

结果

4、解析json数据文件

代码

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;
上一篇:iOS 读写操作 处理 pthread_rwlock dispatch_barrier_async


下一篇:2021-10-02