PHP+Ajax+MySQL实现无限分类

最新推荐文章于 2024-05-12 00:45:00 发布

我是阿飞啊

最新推荐文章于 2024-05-12 00:45:00 发布

阅读量437

点赞数

分类专栏： # php

本文链接：https://blog.csdn.net/weixin_41932507/article/details/90729254

版权

php 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Ajax

2 篇文章 0 订阅

订阅专栏

1.实现思路

1）、MySQL表设计：在表中添加parent_id字段，用来记录记录的父类别

2）、PHP文件：a、编写一个接口文件用来返回parent_id相同的类别

b、编写模板文件，用来对类别进行输出

c、编写index.php文件，文件中获取parent_id为0即没有父类别的分类

3）、js文件：a、编写基础文件，包括接口基础地址和在其他文件中都有可能使用的函数

b、编写获取分类的文件，用于获取分类，以及显示分类下的子分类和收起分类下的子分类

2.简单实例

1）、MySQL表设计以及其中的数据：

CREATE TABLE `limirless_sort`(
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT '类别的id号',
  `name` varchar(20) NOT NULL COMMENT '类别的名字',
  `parent_id` int(11) NOT NULL COMMENT '类别所属的父类',
  PRIMARY KEY(`id`)
)ENGINE=InnoDB DEFAULT CHARSET=utf8

2）、PHP文件编写

a、首页文件编写，由两部分构成，一是模板文件（为了显示分类而创建），二是index.php；在index.php文件中，首先获取数据库中的一级分类，然后引入模板文件进行显示

index.php

try{
    $db = DB::getIntance();//实例化数据库操作类，单例模式
    $res = $db->selectAll('limitless_sort', ['parent_id' => 0]);
    if($res){
        require_once './classification.php';
    }
}catch (Exception $e){
    echo $e->getMessage();
}

模板文件

<html>
<head>
    <meta charset="UTF-8">
    <title>无限分类</title>
    <link rel="stylesheet" href="http://test.com/PHPMailer/static/css/bootstrap.min.css">
    <script src="http://test.com/PHPMailer/static/js/jquery-3.4.0.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="col-md-3">
            <ul class="list-group">
                <?php foreach ($res as $k=>$v){ ?>
                <li class="list-group-item" id="item<?php echo $v['id']; ?>">
                    <span class="badge"><?php echo $v['parent_id']; ?></span>
                    <input type="button" onclick="Classification(this);" value="+">
                    <?php echo $v['name']; ?>
                    <div id="content<?php echo $v['id']; ?>"></div>
                </li>
                <?php } ?>
            </ul>
        </div>
    </div>
</body>
<script src="static/base.js"></script>
<script src="static/getClass.js"></script>
</html>

b、编写接口文件，编写一个用来获取分类的子分类的接口文件，接口返回的数据包括三部分：code（返回信息的状态）、message（返回信息）、data（返回数据），code为100则为正常使用，code为400则为返回数据为空

$db = DB::getIntance();
if($_GET['parent_id']){
    $res = $db->selectAll('limitless_sort', ['parent_id' => $_GET['parent_id']]);
    if($res){
        $code = 100;
        $message = 'success';
        $data = [
            'code' => $code,
            'message' => $message,
            'data' => $res
        ];
        echo json_encode(json_decode(json_encode($data)));
    }else{
        $code = 400;
        $message = 'success';
        $data = [
            'code' => $code,
            'message' => $message,
            'data' => []
        ];
        echo json_encode(json_decode(json_encode($data)));
    }
}

3）、Ajax

a、base.js文件，主要包括接口的基础地址和常用的函数

window.base = {
    baseUrl: 'http://test.com/limitlessSort/',
    getData: function(params){
      var that = this;
      $.ajax({
          url: that.baseUrl + params.url,
          type: params.type,
          dataType: params.datatype,
          data: params.data,
          success: function(res){
              params.sCallback && params.sCallback(res);
          },
          error: function(err){
              params.eCallback && params.eCallback();
          }
      });
    }
};

b、getClass.js文件，用来获取分类下的子分类，文件主要分为两部分，一是获取并显示子分类，二是收起子分类

function Classification(obj){
    if(obj.value == '+'){
        getClassification(obj);
    }else{
        backClassification(obj);
    }
}
function getClassification(obj){
    var id = obj.parentNode.id;
    var params = {
        url: 'getClassificationByParentId.php',
        type: 'GET',
        datatype: 'json',
        data: {
            'parent_id': id.substr(4)
        },
        sCallback: function(res) {
            console.log(obj.value);
            if(res.code == 400){
                alert('暂无分类!');
                return false;
            }
            var html = "<ul class='list-group'>";
            $.each(res.data, function(k, v){
                html += "<li class='list-group-item' id='item" + v.id + "'>" +
                    "<span class='badge'>" + v.parent_id + "</span>" +
                    "<input type='button' onclick='Classification(this);' value='+' />" +
                    v.name +
                    "<div id='content" + v.id + "'></div>" +
                    "</li>";
            });
            html += "</ul>";
            obj.value = '-';
            $("#content"+id.substr(4)).append(html);
        },
        eCallback: function(err) {
            console.log(err);
        }
    };
    window.base.getData(params);
}
function backClassification(obj){
    var id = obj.parentNode.id;
    console.log(obj.value);
    obj.value = "+";
    $("#content"+id.substr(4)).empty();
}

4）、显示结果

我是阿飞啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
PHP+Ajax+MySQL实现无限分类

1.实现思路1）、MySQL表设计：在表中添加parent_id字段，用来记录记录的父类别2）、PHP文件：a、编写一个接口文件用来返回parent_id相同的类别b、编写模板文件，用来对类别进行输出c、编写index.php文件，文件中获取parent_id为0即没有父类别的分类3）、js文件：a、编写基础文件，包括接口基础地址和在其他文件中都有可能使用的函数b、编写获取...
复制链接

扫一扫