學過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>
