分类——ajax异步实现分类

最新推荐文章于 2021-08-06 16:34:14 发布

weixin_33997389

最新推荐文章于 2021-08-06 16:34:14 发布

阅读量289

点赞数

文章标签： php python 开发工具

原文链接：https://my.oschina.net/u/3530967/blog/1545732

版权

2019独角兽企业重金招聘Python工程师标准>>>

其实就是写api

这里以二级分类为例子：基于TP5 输入图片说明

点击省份，就可以获取到城市。

创建api模块创建控制器，创建city.php,

<?php
namespace app\api\controller;
use think\Controller;
use think\Exception;

class City extends Controller
{
    private  $obj;
    public function _initialize() {
        $this->obj = model("City");
    }

    /**
     * 商户入驻通过省找城市
     * @return mixed
     */
    public function getCitysByParentId() {
        $id = input('post.id');
        // echo $id;die;
        if(!$id) {
            $this->error('ID不合法');
        }
        //halt($id);
        // 通过id获取二级城市  将父类id传入
        $citys = $this->obj->getNormalCitysByParentId($id);
        if(!$citys) {
            throw new Exception('资源未找到',404);
        }
        return $this->result($citys,200);
    }

}

getNormalCitysByParentId方法

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2017/9/25
 * Time: 14:46
 */

namespace app\common\model;


class City extends Base
{
    /*
     *获取城市分类 ,获取城市的父类id
     */
    public function getNormalCitysByParentId($parentId=0) {
        $data = [
            'status' => 1,
            'parent_id' => $parentId,
        ];

        $order = [
            'id' => 'desc',
        ];

        return $this->where($data)
            ->order($order)
            ->select();
    }
}

js实现ajax接收php api数据

<script type="text/javascript">

 /**
 * 点击城市获取二级城市
 */
var SCOPE = {
    city_url' : '{:url('api/city/getCitysByParentid')}',
}

$(".cityId").change(function(){
    city_id = $(this).val();
    url = SCOPE.city_url;
    postData = {'id':city_id};
    // 抛出请求
    $.post(url,postData,function(result){
        // todo
        if(result.code == 200){
            // 将信息填充到变量
            // [{id: 13, name: "吉安", uname: "jian", parent_id: 4, listorder: 0, status: 1,…},…]
            data = result.data;
            city_html = "";
            $(data).each(function(){
                city_html += "<option value='"+this.id+"'>"+this.name+"</option>>";
            });
            $('.se_city_id').html(city_html);

        }

        else
        {
            // alert(result.message);
            $('.se_city_id').html('');
            return;
        }
    },"json");
});
</script>

可以将主要的js代码分离到公共js

转载于:https://my.oschina.net/u/3530967/blog/1545732