学过javascript和接触过后端PHP语言必然要用到ajax,这是必学的一门学科,AJAX指的是Asynchronous JavaScript and XML,它使用XMLHttpRequest对象来与服务端脚本交流。请求方式，分为GET与POST： GET 最为常见的HTTP请求，普通上网浏览页面就是GET。GET方式的参数请求直接跟在URL后，以问号开始。
它可以发送和接收不同格式的信息，包括JSON，XML，HTML，AJAX最吸引人的特点是它的”async(异步)的本质，它意味着它可以做所有这些事情而不需要刷新页面。这使得你 可以基于用户事件只更新页面的一部分。AJAX执行完毕后才会继续运行其他代码页面假死状态解除。 而异步则这个AJAX代码运行中的时候其他代码一样可以运行。 jquery的async:false,这个属性 默认是true：异步，false：同步。
<html>
<head>
<meta charset = utf-8>
<link rel="stylesheet" type="text/css" href = "bootstrap.css">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
</head>
<body>
<!--布局-->
<div class = "container"> <!--容器-->
<div class = "panel panel-default"> <!--面板-->
<div class = "panel panel-heading">
<h1>1409D学生信息</h1>
</div>
<div class="panel panel-body">
<div class="form-inline">
<div class="form-group">
<select class="form-control" id="select"> <!--下垃选项-->
<option value="">请选择根据什么查询</option>
<option value="name">姓名查询</option>
<option value="sex">性别查询</option>
<option value="age">年龄查询</option>
<option value="tel">电话查询</option>
<option value="addr">市场部查询</option>
</select> <!--输入框-->
<input type="text" id = "textname" class="form-control" placeholder="请输入查询内容">
<button class="btn btn-info" id="find">查询</button>
<button class="btn btn-link" id="all">显示所有</button>
</div>
</div>
<table class="table table-holder"> <!--表格-->
<thead> <!--表头-->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
<th>市场部</th>
</tr>
</thead>
<tbody></tbody> <!--内容主题-->
</table>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
show(null,null); //先默认为空值
$("#find").click(function () { //点击查找事件调用方法
var select = $("#select").val(); //定义变量接收下拉选项
var textname = $("#textname").val(); //定义变量接收文本框的值
show(select,textname);
})
$("#all").click(function () { //点击all显视全部调用函数
show(null,null); //默认显示为空值
$("#all").val(""); //赋空值
$("#all option").eq(0).prop("selected",true); //给all按键为下拉选项第一个值
})
})
function show(select,textname) { //show函数传参
$.ajax({
url:"show.php", //地址文件路径
data:{"select":select,"name":textname}, //数据传递参数
dataType:"json", //数据类型为json
success:function (data) { //成功时传参
var tr=""; //定义变量
$.each(data,function (key,value) { //循环传递的键值
tr+="<tr><td>"+value[1]+"</td><td>"+value[2]+"</td><td>"+value[3]+"</td><td>"+value[4]+"</td><td>"+value[5]+"</td></tr>";
})
$("tbody").html(tr); //替换每一行
},
error:function () { //失败时提示失败
alert('失败')
}
})
}
</script>