jQuery对AJAX的封装——$.getJSON

如果php页面写请求头了，那么get和getjson是一样的。

<?php
header('Content-Type: application/json');
//一次向客户端返回三个员工信息，以JSON格式
$output = [];

for($i=0; $i<3; $i++){
	$eno = rand(1000,10000);
	$ename = 'Tom'.rand(1000, 10000);
	$salary = rand(3000, 30000);
	$birthday = rand(0, 1460360588475);
	
	$emp = ['eno'=>$eno,'ename'=>$ename,'salary'=>$salary, 'birthday'=>$birthday];
	$output[] = $emp;
}
$jsonString = json_encode($output);
echo $jsonString;



/*$emp = ['eno'=>1, 'ename'=>'Tom', 'salary'=>5000];
//array_push($output, $emp);
$output[] = $emp;    //向大数组中添加新元素

$emp = ['eno'=>1, 'ename'=>'Tom', 'salary'=>5000];
$output[] = $emp;

$emp = ['eno'=>1, 'ename'=>'Tom', 'salary'=>5000];
$output[] =  $emp;*/

//var jsonString = json_encode($output);
//echo jsonString;
?>

html：

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
	<style>
		table {
			width: 100%;
			border-spacing: 0;
			border-collapse: collapse;
		}
		table th {
			border-bottom: 2px solid #aaa;
			padding: 6px 10px;
			text-align: left;
		}
		table td {
			border-bottom: 1px solid #aaa;
			padding: 6px 10px;
		}
		#btMore {
			display: block;
			width: 100%;
			margin: 15px 0 0 0;
			padding: 6px 0;
		}
	</style>
 </head>

 <body>
  <h1>jQuery对AJAX的封装——$.getJSON</h1>
	<table>
		<thead>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>工资</th>
				<th>生日</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>

	<button id="btMore">加载更多员工数据</button>

	<script src="js/jquery-1.11.3.js"></script>
	<script>
		$('#btMore').click(function(){
			$.getJSON('6-emplist.php', function(data){
				console.log('读取到服务器成功的响应消息');
				//console.log(typeof data);
				//console.log(data);
				for(var i=0; i<data.length; i++){
					var emp = data[i];
					$('table tbody').append('<tr><td>'+emp.eno+'</td><td>'+emp.ename+'</td><td>'+emp.salary+'</td><td>'+new Date(emp.birthday)+'</td></tr>');
				}
			});
		});
	</script>
 </body>
</html>