1.新建項(xiàng)目
新建comm、manage、js目錄
將jQuery文件粘貼放入js中，將comm.php、config.php放入comm目錄中，如下圖所示：
2.數(shù)據(jù)訪問(wèn)層-dao層：用戶dao
user.dao.php
<?php
/*
* 用戶信息數(shù)據(jù)表操作文件
*/
require_once "comm.php";//引入3.1節(jié)中的公共程序文件
function findUserList($searchName) {
$strQuery = "select * from TBL_USER";
if(isset($searchName)&&$searchName!="") {
$strQuery .= " where uName like '%$searchName%'";//查詢語(yǔ)句
}
$rs = execQuery($strQuery); //調(diào)用comm.php中的execQuery函數(shù)
if(count($rs)> 0){//判斷查詢是否成功
return $rs;
}
return $rs;
}
?>
3.業(yè)務(wù)層
doUserInfo.php
<?php
header('Content-type:text/json;charset=utf-8');
require_once '../comm/user.dao.php';//導(dǎo)入用戶數(shù)據(jù)操作類
$searchName = $_POST['searchName'];
$userList = findUserList($searchName);
echo json_encode($userList);
?>
4.表示層-頁(yè)面
userList.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<p><input id="username" type="text" placeholder="請(qǐng)輸入用戶名"/><button onclick="getUserInfo()">搜索</button></p>
<table>
<thead>
<th>
<td>用戶編號(hào)</td>
<td>用戶名</td>
</th>
</thead>
<tbody id="userInfo">
</tbody>
</table>
</body>
<script type="text/javascript">
function getUserInfo() {
var searchName = document.getElementById("username").value;
$.ajax({
url:"./manage/doUserInfo.php",
data:{searchName:searchName},
type:"post",
dataType:"json",
success:function (data) {
console.log(data);
var trs="";
for (var i=0;i<data.length;i++){
trs+="<tr><td>"+data[i]["uId"]+"</td>"+"<td>"+data[i]["uName"]+"</td></tr>";
}
document.getElementById("userInfo").innerHTML=trs;
}
})
}
getUserInfo();
</script>
</html>
