ajax GET方式传参

服务端：

<?php 
$data = array(
	array('id' => 1,'name' => '张三' , 'age' => 18),
	array('id' => 2,'name' => '张四' , 'age' => 20),
	array('id' => 3,'name' => '王五' , 'age' => 30),
	array('id' => 4,'name' => '赵六' , 'age' => 50),
);
//将数据序列化
$json=json_encode($data);

//TODO 没传参数返回全部信息， 传了参数返回指定信息
if (empty($_GET['id'])) {
	//没有传入参数 返回全部信息
	echo $json;
}else{
	foreach ($data as $item) {
		if ($item['id']==$_GET['id']) {
			echo json_encode($item);
		}
	}
}

客户端：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax_GET方式传参</title>
</head>
<body>
	<ul id="order">

	</ul>
	<script>
		//从服务端拿到数据渲染到客户端
		<!--创建一个对象-->
		var list=document.getElementById('order');
		var xhr = new XMLHttpRequest();
		//设置请求行  以GET的方式请求，01-ajax_API.php
		xhr.open('GET','/01-ajax_API.php');
		//设置请求体
		xhr.send(null);
		xhr.onload= function(){
			//从服务端拿到的数据反序列
			  var data=JSON.parse(this.responseText);
			 for (var i=0; i<data.length; i++){
			 	var li = document.createElement('li');
			 	li.id=data[i].id;
			 	li.innerHTML = data[i].name;
			 	list.appendChild(li);
			 }
			//给每个li 注册点击事件
			//拿到list的子节点===li
			var list_li=list.children;
			//遍历下list_li 添加注册点击事件
			for (var i=0; i<list_li.length;i++){
				list_li[i].addEventListener('click',function () {
					var xhr = new XMLHttpRequest();
					xhr.open('GET','/01-ajax_API.php?id='+this.id);
					xhr.send(null);
					xhr.onreadystatechange=function () {
						if (this.readyState==4){
							alert(JSON.parse(this.responseText).age)
						}
					}
				})
			}
		}
	</script>

</body>
</html>

ajax GET方式传参

悦读