Laravel中如何通过AJAX调用控制器获取数据填充下拉选择框

步骤1：修改控制器返回JSON数据 #

原控制器方法没有返回值，需要将获取到的$offices以JSON格式返回给AJAX请求，可同步增加异常捕获处理接口异常：

public function offices(Request $request) {
    try {
        $url = Http::get('the_url_of_the_api', [
            'userName' => '123456',
            'password' => '345678',
        ]);
        $response = json_decode($url);
        $offices = $response->offices;
        // 直接返回JSON格式数据
        return response()->json([
            'code' => 200,
            'data' => $offices
        ]);
    } catch (\Exception $e) {
        return response()->json([
            'code' => 500,
            'msg' => '获取网点数据失败'
        ]);
    }
}

步骤2：调整视图下拉框初始结构 #

移除页面加载时的服务端渲染逻辑，保留空下拉框+默认提示项即可：

<select name="office" class="offices form-control">
    <option value="">请选择网点</option>
</select>

步骤3：完善AJAX逻辑实现数据渲染 #

增加本地缓存避免重复请求，封装渲染逻辑处理下拉框更新：

<script>
// 全局变量缓存已拉取的网点数据，避免重复发起请求
let officeCache = null;

$(document).ready(function(){
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('input[name="radio"]').click(function(){
        // 仅选中指定单选按钮时才执行逻辑，不需要可删除该判断
        if($(this).val() !== '你要触发请求的单选按钮值') return;

        // 已有缓存直接渲染，无需重复请求
        if(officeCache) {
            renderOffices(officeCache);
            return;
        }

        $.ajax({
            type: "GET",
            url: "/offices",
            dataType: "json",
            success: function(res) {
                if(res.code === 200) {
                    officeCache = res.data;
                    renderOffices(res.data);
                } else {
                    alert(res.msg || '获取数据失败');
                }
            },
            error: function() {
                alert('接口请求异常');
            }
        });
    });

    // 封装下拉框渲染公共方法
    function renderOffices(offices) {
        const $select = $('select[name="office"]');
        // 清空原有业务选项，保留默认提示项
        $select.find('option:not(:first)').remove();
        // 循环生成选项插入
        offices.forEach(office => {
            const option = `<option value="${office.name}">${office.name}</option>`;
            $select.append(option);
        });
    }
});
</script>

注意事项 #

请确保页面<head>标签中存在csrf的meta配置，否则AJAX请求会返回419错误：

<meta name="csrf-token" content="{{ csrf_token() }}">

内容的提问来源于stack exchange，提问作者user2519032