在 Laravel 11 中创建依赖 Ajax 的下拉菜单及 Ajax 创建方法

在现代 Web 开发中，依赖 Ajax 的下拉菜单能极大提升用户体验。在 Laravel 11 框架下，实现这一功能并不复杂。

搭建项目基础。确保已安装好 Laravel 11 环境，可通过 Composer 创建新项目。接着创建数据库表来存储相关数据，例如有省份和城市的关系，省份表存储省份信息，城市表存储城市信息并关联省份。

在视图层面，创建一个包含下拉菜单的表单。第一个下拉菜单用于选择省份，第二个则根据所选省份动态加载对应的城市。使用 HTML 和 Blade 模板语法创建如下结构：

<select id="province">
    <option value="">请选择省份</option>
    @foreach ($provinces as $province)
        <option value="{{ $province->id }}">{{ $province->name }}</option>
    @endforeach
</select>

<select id="city">
    <option value="">请选择城市</option>
</select>

接下来是关键的 Ajax 部分。引入 jQuery 库，因为它简化了 Ajax 操作。在页面的 JavaScript 代码块中编写如下代码：

$(document).ready(function() {
    $('#province').change(function() {
        var provinceId = $(this).val();
        if (provinceId) {
            $.ajax({
                url: '/get-cities/' + provinceId,
                type: 'GET',
                success: function(response) {
                    $('#city').empty();
                    $('#city').append('<option value="">请选择城市</option>');
                    $.each(response, function(key, value) {
                        $('#city').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                },
                error: function() {
                    console.log('Error fetching cities');
                }
            });
        } else {
            $('#city').empty();
            $('#city').append('<option value="">请选择城市</option>');
        }
    });
});

上述代码监听省份下拉菜单的变化事件，获取所选省份的 ID，通过 Ajax 请求发送到服务器。

在 Laravel 的路由文件中定义请求路径对应的控制器方法：

Route::get('/get-cities/{provinceId}', [CityController::class, 'getCities']);

最后在控制器中实现获取城市数据的逻辑：

public function getCities($provinceId)
{
    $cities = City::where('province_id', $provinceId)->get();
    return response()->json($cities);
}

通过上述步骤，就能在 Laravel 11 中成功创建依赖 Ajax 的下拉菜单，为用户提供流畅的交互体验。掌握这种方法，能让开发者更好地构建动态、高效的 Web 应用程序。