![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：写得不错, 超出我的预期
Collection
Collection
功能描述：
设置搜索条件，可以单一条件搜索 也可多个条件同时搜索，完成数据查询 生成前台显示的功能，
前后端通讯方式 ajax 异步 $.ajax 适用POST请求方式完成。
总结 ：前端script代码过多，适用post方式提交翻页请求时需重新获取翻页标签属性值，并生成数据传输后台才能生效 很繁琐
如果首次查询以POST方式提交传输数据，后继翻页不方便变更为GET方式翻页，后台获取参数频繁报错，所以就功能而言，前后简单查询和翻页查询的提交传输数据方式应该保持一致。 功能还有可以更细致完善的地方没有完善。页码过多时的显示样式没有设计实现。用ajax方式实现的翻页效果 比直接用php 在当前页实现翻页效果复杂的多，相当繁琐。
无条件查询
单一条件查询 当前表中男的有多少
复合条件查询 男的 工资在3000到5000的有谁
复合条件查询 + 翻页 男的 年龄在20到30之间 的第二页数据
以下为实例代码
前台页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页查询实战</title>
<script src="./lib/js/jquery-3.4.1.js"></script>
</head>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
.form{
width: 600px;
height: 150px;
margin: 50px auto;
padding: 10px 25px;
text-align: center;
border-radius:7px;
border: 1px solid black;
}
.form table{
border-collapse:collapse;
width:600px;
margin:0 auto;
text-align:center;
}
.form tr td{
width:148px;
}
.form input[type='text']{
width: 100px;
float: left;
}
.resultTable{
width:800px;
height: 300px;
margin: 10px auto;
text-align: center;
border-radius:7px ;
border: 1px solid black;
}
.resultTable table{
border-collapse:collapse;
width:700px;
margin:0 auto;
text-align:center;
}
caption{
margin: 10px auto;
font-weight: bold;
}
.resultTable table th,td{
border:1px solid #000000;
}
.resultTable table th{
background:lightblue;
}
.resultTable .page{
text-align: center;
width: 800px;
display: table-cell;
vertical-align: middle;
}
.page ul{
margin-top: 15px;
list-style-type: none;
}
.page ul li{
margin: 15px 5px;
padding: 3px 10px;
display: inline;
color: black;
border-radius: 4px;
border: 1px solid lightskyblue;
}
.page ul li:hover{
margin: 15px 5px;
padding: 3px 10px;
display: inline;
color: red;
border-radius: 4px;
border: 1px solid lightskyblue;
}
.page ul li:last-child input {
width: 50px;
margin: 0 5px;
}
</style>
<body>
<div class="form">
<form action="" name="search">
<table>
<tr>
<td>
<label for="name">姓名 :</label>
</td>
<td colspan="3"><input type="text" id="name"></td>
</tr>
<tr>
<td><label for="name">性别 :</label></td>
<td colspan="3">
<input type="radio" name="sex" value="2">女
<input type="radio" name="sex" value="1">男
</td>
</tr>
<tr>
<td><label for="ageSymbol">年龄 :</label></td>
<td>
<select name="ageSymbol" id="ageSymbol">
<option value="0">等于</option>
<option value="1">大于</option>
<option value="2">小于</option>
<option value="3=">不等于</option>
<option value="4">之间</option>
</select>
</td>
<td><input class="hidden" type="text" id="age1" name="age1" value=""></td>
<td><input type="text" id="age2" name="age2" value="" hidden></td>
</tr>
<tr>
<td><label for="salarySymbol">工资 :</label></td>
<td>
<select name="salarySymbol" id="salarySymbol">
<option value="0">等于</option>
<option value="1">大于</option>
<option value="2">小于</option>
<option value="3">不等于</option>
<option value="4">之间</option>
</select>
</td>
<td><input type="text" id="salary1" name="salary1" value=""></td>
<td><input type="text" id="salary2" name="salary2" value="" hidden></td>
</tr>
<tr>
<td colspan="4">
<button type="button" id="btn_search">查询提交</button>
</td>
</tr>
</table>
</form>
</div>
<div class="resultTable">
<table>
<caption>员工信息表</caption>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>工资</th>
</tr>
</thead>
</table>
<div class="page">
</div>
</div>
<script>
//查询表单定位
var searchInfo = document.forms.namedItem("search");
// 结果显示的表格定位
var table = document.getElementsByTagName("table")[1];
// 新建表格主体元素 tbody
var tbody = document.createElement("tbody");
// ul定位 用于显示页码
var page = document.getElementsByClassName("page")[0];
var ul = document.createElement("ul");
//条件查询按钮
var btn_search = document.getElementById('btn_search');
// 条件查询按钮 按键监听
btn_search.addEventListener('click',searchData,false);
//年龄和工资 的输入框定位
var age = document.getElementById('ageSymbol');
var age2 = document.getElementById('age2');
var salary = document.getElementById('salarySymbol');
var salary2 = document.getElementById('salary2');
//年龄输入内容设置为区间条件时 触发监控 显示第二个年龄输入框
age.addEventListener("change",editAge,false);
function editAge(){
if(age.value == "4"){
age2.removeAttribute("hidden");
}else{
age2.setAttribute("hidden",true);
}
}
//工资输入内容设置为区间条件时 触发监控 显示第二个工资输入框
salary.addEventListener("change",editSalary,false);
function editSalary(){
if(salary.value == "4"){
salary2.removeAttribute("hidden");
}else{
salary2.setAttribute("hidden",true);
}
}
// 条件查询 按键触发的搜索事件
function searchData(){
var dataStr = "name="+searchInfo.name.value+"&sex="+searchInfo.sex.value+"&ageSymbol="+searchInfo.ageSymbol.value+
"&age1="+searchInfo.age1.value+"&age2="+searchInfo.age2.value+"&salarySymbol="+searchInfo.salarySymbol.value+
"&salary1="+searchInfo.salary1.value+"&salary2="+searchInfo.salary2.value;
//异步传输数据
$.ajax({
// 请求类型
type:"POST",
// 请求的服务器处理程序: url
url:"pages.php",
// 成功回调
success:resultDate,
// 服务器返回的数据类型
dataType: "json",
// 发送到服务器的数据,默认转为请求字符串/键值对
data:dataStr
})
}
// 查询按键触发的搜索事件，查询成功后的调用函数
function resultDate(msg){
var res ="";
if(msg.state == 0){
var sqlData=msg.data;
var pages =msg.pages;
//循环输出查询结果
sqlData.forEach(function(item){
// console.log(data);
// console.log(data['name']);
if (item['sex']==0) {
var sex ="男";
}else{
var sex= "女";
}
//组合HTML显示代码
res+="<tr>"
+"<td>"+item['id']+"</td>"
+"<td>"+item['name']+"</td>"
+"<td>"+sex+"</td>"
+"<td>"+item['age']+"</td>"
+"<td>"+item['salary']+"</td>"
+"<tr>";
return res;
});
//控制台输出测试一下 HTML字串是否正确
//console.log(res);
if(tbody.firstChild===null){
//没有子节点，直接为当前节点赋值
tbody.innerHTML=res;
}else{
//但前节点有子节点，说明有原先的值，把原值清理掉 重新组合
tbody.innerHTML=null;
tbody.innerHTML=res;
}
//将查询结果的HTML显示元素插入table标签
table.appendChild(tbody);
//构建页码显示
//控制台查看一下总页码数量
// console.log(pages)
var pageHtml="";
for (var i =1;i<=pages;i++){
pageHtml += "<li value="+i+">"+i+"</li>";
}
pageHtml = "<li value='1'>首页</li>"+pageHtml+"<li value="+pages+">尾页</li>";
ul.innerHTML=pageHtml;
// console.log(pageHtml);
page.appendChild(ul);
}
}
// li事件委托监听 按键
page.addEventListener("click",pageSearch,false);
// 监听调用的 翻页响应事件
function pageSearch(e){
// alert("什么鬼")
//获取当前发生行为元素的文本值 li标签对应的属性值
var p = e.target.getAttribute("value");
console.log(p);
var dataStr = "p="+p+"&name="+searchInfo.name.value+"&sex="+searchInfo.sex.value+"&ageSymbol="+searchInfo.ageSymbol.value+
"&age1="+searchInfo.age1.value+"&age2="+searchInfo.age2.value+"&salarySymbol="+searchInfo.salarySymbol.value+
"&salary1="+searchInfo.salary1.value+"&salary2="+searchInfo.salary2.value;
//异步传输数据
$.ajax({
// 请求类型
type:"POST",
// 请求的服务器处理程序: url
url:"pages.php",
// 成功回调
success:resultDate,
// 服务器返回的数据类型
dataType: "json",
// 发送到服务器的数据,默认转为请求字符串/键值对
data:dataStr
})
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
以下为后台实例代码 pages.php
<?php
//echo "<pre>";
//echo print_r($_SERVER);
$name = $_POST['name'];
$sex = $_POST['sex'];
$ageSymbol = $_POST['ageSymbol'];
$age1 = $_POST['age1'];
$age2 = $_POST['age2'];
$salarySymbol = $_POST['salarySymbol'];
$salary1 = $_POST['salary1'];
$salary2 = $_POST['salary2'];
// 为符号标识更换 条件标识
$arr =[0=>"=",1=>">",2=>"<",3=>"!="];
foreach ($arr as $key=>$val){
if($ageSymbol==$key){
$ageSymbol = $val;
}
}
foreach ($arr as $key=>$val){
if($salarySymbol==$key){
$salarySymbol = $val;
}
}
//查询条件变量
$requirement = null;
// 姓名属性存在时生成的 查询条件
if(!empty($name)){
$requirement = " WHERE `name` = '".$name."' ";
}
// 性别属性存在时可以生成的两种 查询条件
if(!empty($sex)){
$sex==1?$sex=0:$sex=1;
if(strlen($requirement)>0) {
// 按性别和姓名同时存在时生成的 查询条件
$requirement .= " AND `sex` = ".$sex;
}else{
// 仅性别条件存在时的 查询条件
$requirement = " WHERE `sex` = ".$sex;
}
}
// 年龄属性存在是可以生成的几种 查询条件
if(!empty($age1)) {
// 判断之前是否已经生成查询条件，如已有部分查询条件则执行如下
if (strlen($requirement) > 0) { //有前置查询条件
// 根据第二个年龄是否存在，判断是否开启区间查询语句
if (!empty($age2)) {
//存在
$requirement .= " AND `age` BETWEEN " . $age1 . " AND " . $age2;
} else {
//不存在
$requirement .= " AND `age` " . $ageSymbol . " " . $age1;
}
} else {
//没有前置查询条件
if (!empty($age2)) {
//存在 年龄2
$requirement = " WHERE `age` BETWEEN " . $age1 . " AND " . $age2;
} else {
//不存在 年龄2
$requirement = " WHERE `age` " . $ageSymbol . " " . $age1;
}
}
}
// 工资属性存在是可以生成的几种 查询条件
if(!empty($salary1)) {
// 判断之前是否已经生成查询条件，如已有部分查询条件则执行如下
if (strlen($requirement) > 0) { //有前置查询条件
// 根据第二个工资是否存在，判断是否开启区间查询语句
if (!empty($salary2)) {
//存在
$requirement .= " AND `salary` BETWEEN " . $salary1 . " AND " . $salary2;
} else {
//不存在
$requirement .= " AND `salary` " . $salarySymbol . " " . $salary1;
}
} else {
//没有前置查询条件
if (!empty($salary2)) {
//存在 工资2
$requirement = " WHERE `salary` BETWEEN " . $salary1 . " AND " . $salary2;
} else {
//不存在 工资2
$requirement = " WHERE `salary` " . $salarySymbol . " " . $salary1;
}
}
}
// 测试 查询条件字符串
//echo $requirement;
try{
$pdo = new PDO("mysql:host=127.0.0.1;dbname=php","root","root");
}catch (PDOException $E){
die("数据库连接出错".$E->getMessage());
}
//获取当前页码
if(isset($_POST['p'])){
$page = $_POST['p'];
}else{
$page = 1;
}
//每页分页最大记录数
$num = 5 ;
//每页查询到
$offset = ($page-1)*$num;
//计算符合查询条件的记录总数
$sql_pages = "SELECT `id`,`name`,`sex`,`age`,`salary` FROM `staff`{$requirement} ";
//echo $sql_pages;
$stmt = $pdo->prepare($sql_pages);
$stmt->execute();
$count = $stmt->rowCount();
$pages =ceil($count / $num);
//当页符合查询条件的记录
$sql_limit = "SELECT `id`,`name`,`sex`,`age`,`salary` FROM `staff`{$requirement} LIMIT {$offset},{$num}";
//echo $sql_limit;
$stmt = $pdo->prepare($sql_limit);
$stmt->execute();
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
//测试输出结果集
//foreach ($rows as $val){
// print_r($val);
//}
exit (json_encode(["state"=>0,"pages"=>$pages,"data"=>$rows]));点击 "运行实例" 按钮查看在线实例
