Laravel ajax三级联动

Posted 2020-12-21 满眼都是她

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Laravel ajax三级联动相关的知识，希望对你有一定的参考价值。

三级联动表:http://m.caomeipi.com/（鹏鹏）

路由:

//省份
Route::get(‘province‘,‘PortController@province‘);

//市
Route::get(‘city‘,‘PortController@city‘);

//区
Route::get(‘area‘,‘PortController@area‘);

控制器:

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use IlluminateSupportFacadesDB;
class PortController extends Controller
{

    //查询省份
    public function province(Request $request)
    {
        $province =  DB::table(‘china_area‘)->where(‘parent_id‘,1)->get();
        return view(‘port/china‘,[‘province‘=>$province]);
    }

    //查询市
    public function city(Request $request)
    {
        $province = $request[‘province‘];
      

        $city = DB::table(‘china_area‘)->where(‘parent_id‘,‘=‘,$province)->get()->toArray();
      
         
        return json_encode([‘status‘ => 0, ‘data‘ => $city]);
    }

    //查询区
    public function area(Request $request)
    {
        $city = $request[‘city‘];
        $area = DB::table(‘china_area‘)->where(‘parent_id‘,‘=‘,$city)->get()->toArray();
        return json_encode([‘status‘ => 0, ‘data‘ => $area]);
    }
}

视图层:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
        <select class="province">
                <option value="0">==请选择省==</option>
            @foreach($province as $item)
            <option value="{{ $item->id }}">{{ $item->name }}</option>
            @endforeach
        </select>
        <select class="city">
            <option value="0">==市==</option>
        </select>
        <select class="area">
            <option value="0">==区/县==</option>
        </select>
</body>
</html>
<script type="application/javascript">
    $(function() {
        //当省选项值发生变化的时候，发送ajax请求，获取对应的市区信息，并渲染
        $(‘.province‘).change(function() {
            var province = $(this).val();

            $.ajax({
                //请求方式
                type: "get",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url: "city",
                //数据，json字符串
                data: {
                    "province": province
                },
                //请求成功
                dataType: "json",
                success: function(result) {
                    //console.log(result)
                    if (result.status == 0) {
                        var citys = result.data;

                        var optionstr = "<option value=‘0‘>==市==</option>";
                        //渲染city选择框
                        for (var i = 0; i < citys.length; i++) {
                            var city = citys[i];

                            optionstr += "<option value=‘" + city.id + "‘>" + city.name + "</option>";
                        }
                        $(‘.city‘).html(optionstr);
                    } else {
                        alert(result.message);
                    }
                },
                //请求失败，包含具体的错误信息
                error: function(e) {
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });

        })
        $(‘.city‘).change(function() {
            var city = $(this).val();
            console.log(city);
            $.ajax({
                //请求方式
                type: "get",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url: "area",
                //数据，json字符串
                data: {
                    "city": city
                },
                //请求成功
                dataType: "json",
                success: function(result) {
                    //console.log(result)
                    if (result.status == 0) {
                        var cityss = result.data;

                        var optionstr = "<option value=‘0‘>==市==</option>";
                        //渲染city选择框
                        for (var i = 0; i < cityss.length; i++) {
                            var city = cityss[i];

                            optionstr += "<option value=‘" + city.id + "‘>" + city.name + "</option>";
                        }

                        $(‘.area‘).html(optionstr);

                    } else {
                        alert(result.message);
                    }

                },
            });
        })
    })
</script>

效果如图所示:

以上是关于Laravel ajax三级联动的主要内容，如果未能解决你的问题，请参考以下文章