如果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>