使用php laravel jQuser ajax 实现三级联动 省市区

后台 laravel 创建控制器数据返回视图

<?php

namespace App\Http\Controllers;

use App\Models\SelectModel;
use Illuminate\Http\Request;

class SelectController extends Controller
{
    public function province(){
        $res = SelectModel::where(['parent_id'=>1])->get();
        if (!$res){
            return ['code'=>1,'mssage'=>"查询失败",'data'=>''];
        }
        return  view("/day925/select",['data'=>$res]);

    }
    public function city(Request $request){
        $id = $request->input('id');
        $res = SelectModel::where(['parent_id'=>$id])->get();
        if (!$res){
            return ['code'=>1,'mssage'=>"查询失败",'data'=>''];
        }
        return  $result =(['code'=>0,'mssage'=>"查询成功",'data'=>$res]);
    }
    public function area(Request $request){
        $id = $request->input('id');
        $res = SelectModel::where(['parent_id'=>$id])->get();
        if (!$res){
            return ['code'=>1,'mssage'=>"查询失败",'data'=>''];
        }
        return  $result=(['code'=>0,'mssage'=>"查询成功",'data'=>$res]);
    }
}

　　模型

class SelectModel extends Model
{
    //
    protected $table = "china_area";

}

　　路由

//三级联动
Route::get('province','SelectController@province');
Route::get('city','SelectController@city');
Route::get('area','SelectController@area');

　　视图层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动laravel</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<select name="prov" class="province">
    <option value="">--请选择省份--</option>
    @foreach($data as $k=>$v )
        <option value="{{$v->id}}">{{$v->name}}</option>
    @endforeach
</select>
<select name="prov" class="city">
	<option value="">--请选择城市--</option>
</select>
<select name="prov" class="area">
	<option value="">--请选择县区--</option>
</select>

</body>
</html>

<script type="application/javascript" >

    $('.province').change(function (){
        //请求参数
        var province = $(this).val();
        //
        $.ajax({
            //请求方式
            type : "get",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "city",
            //数据，json字符串
            data : {"id":province},
            //请求成功
            dataType:"json",
            success : function(result) {
                if (result.code==0){
                    var citys =result.data;
                    var optionstr = "<option value='0'>--请选择城市--</option>"
                    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);
                }
            },
        });
    });

    $('.city').change(function (){
        var city = $(this).val();
        $.ajax({
            //请求方式
            type : "get",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "area",
            //数据，json字符串
            data :{"id":city},
            //请求成功
            dataType:"json",
            success : function(result) {
                if (result.code==0){
                    var areas =result.data;
                    var options = "<option value='0'>--请选择区县--</option>"
                    for(var i=0;i<areas.length;i++){
                        var area = areas[i];
                        options += "<option value='" + area.id + "'>" + area.name + "</option>";
                    }
                    $('.area').html(options);
                }else {
                    alert(result.message);
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });
</script>

　　

jquser  ajax使用 手册  https://www.jquery123.com/jQuery.get/

posted @ 2020-09-24 11:50  拉斯维加斯  阅读(259)  评论(0)    收藏  举报