JSON解析

最新推荐文章于 2024-03-13 19:02:26 发布

LB14789

最新推荐文章于 2024-03-13 19:02:26 发布

阅读量145

点赞数

分类专栏： AJAX json解析

本文链接：https://blog.csdn.net/LB14789/article/details/82749449

版权

AJAX json解析专栏收录该内容

1 篇文章 0 订阅

订阅专栏

        AJAX中的   json解析

<head>
	<meta charset="UTF-8">
	<title>03json解析</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		table {
			width: 600px;
			border-collapse: collapse;
			margin: auto;
		}
		td {
			text-align: center;
		}
	</style>
</head>
<body>
	<table border="1">
		<tr>
			<th>ID编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
		
	</table>
	
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
	// 页面加载完成之后进行网络请求
	// 第一种写法
	window.onload = function() {
	}
	
	// 第二种写法
	$(function() {
		//获取table
		var table = document.querySelector("table");
		// get 异步请求
		// 1, 创建请求对象
		if (window.XMLHttpRequest) {
			var xhr = new XMLHttpRequest();
		} else {
			var xhr = ActiveXObject("Microsoft.XMLHttp");
		}
		// 2, 添加监听
		xhr.onreadystatechange = function() {
			if(xhr.readyState == 4) {
				// 判断请求是否成功
				if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
					// 请求成功
					// json解析
					var arr = JSON.parse(xhr.responseText);
					for (var i = 0;i < arr.length;i++) {
						//创建tr
						var tr = document.createElement("tr");
						//将 tr添加给table
						table.appendChild(tr);
						//便利学生对象,创建对应的td
						for (var key in arr[i]){
							//创建td
							var td = document.createElement("td");
							td.innerText = arr[i][key];
							tr.appendChild(td);
						}
					}
				} else {
					// 请求失败
					consol.log("请求失败");
				}
			}	
		}
		// 3, 启动请求
		xhr.open("GET", "./03json解析.php");
		// 4, 发送请求
		xhr.send(null);
	});

PHP代码如下:
<?php
echo ‘[{
“id”: 110,
“name”: “李四”,
“sex”: “男”,
“age”:20
},{
“id”: 111,
“name”: “张三”,
“sex”: “男”,
“age”:21
},{
“id”: 112,
“name”: “老王”,
“sex”: “男”,
“age”:18
},{
“id”: 113,
“name”: “王麻子”,
“sex”: “男”,
“age”:24
}]’;
?>