简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >08-01改写 ajax之post 条件搜索查询 含翻页

08-01改写 ajax之post 条件搜索查询 含翻页

子傅
子傅原创
2019年08月03日 04:10:23807浏览

功能描述：

设置搜索条件，可以单一条件搜索 也可多个条件同时搜索，完成数据查询 生成前台显示的功能，

前后端通讯方式 ajax 异步 $.ajax 适用POST请求方式完成。

总结 ：前端script代码过多，适用post方式提交翻页请求时需重新获取翻页标签属性值，并生成数据传输后台才能生效 很繁琐

如果首次查询以POST方式提交传输数据，后继翻页不方便变更为GET方式翻页，后台获取参数频繁报错，所以就功能而言，前后简单查询和翻页查询的提交传输数据方式应该保持一致。 功能还有可以更细致完善的地方没有完善。页码过多时的显示样式没有设计实现。用ajax方式实现的翻页效果 比直接用php 在当前页实现翻页效果复杂的多，相当繁琐。

无条件查询

1111.png

单一条件查询    当前表中男的有多少  

222.png


复合条件查询     男的 工资在3000到5000的有谁

3333.png


复合条件查询 + 翻页   男的 年龄在20到30之间 的第二页数据 

4444.png

以下为实例代码

前台页面

实例

<!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]));

运行实例 »

点击 "运行实例" 按钮查看在线实例


上一条：全国省市县sql下一条：链式数据库查询和添加-2019年8月1日
08-01改写 ajax之post 条件搜索查询 含翻页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多