Laravel下拉框Ajax问题（onChange、Method Not Allowed）求助

我刚学习Ajax，跟随教程操作后遇到困惑与错误，需求为：选中下拉框获取id_program后，更新页面展示对应数据。

相关代码与配置 #

1. 数据库结构 #

涉及Program、Payment、actor表（附截图）

2. DatabaseController.php代码 #

public function data($id)
 {
     $client = new Client();
     $response = $client->request('GET', 'http://localhost:8585/api/v1/tables', [
         'query' => [
             'limit' => '100'
         ]
     ]);
     $data = json_decode($response->getBody()->getContents(), true)['data'];
     $pay = Payment::get()->all();
     $pro = Program::select('nama')->where('name', $id)->get();
     $coba = Program::get()->all();
     foreach ($pro as $p) {
         $name = $p->name;
     }
     return view('database.index', compact('nama','data','pay','coba','pro','id'));
 }

3. 路由定义 #

Route::get('program/database/{database}', [DatabaseController::class,'data'])->name('database.data');

4. database.index视图下拉框代码 #

<select id="id" class="form-control" filter>
        <option>Pilih Layanan...</option>
             @foreach ($coba as $id)
                  <option value="{{$id->id_program}}">{{ $id->nama}}</option>
             @endforeach
</select>

5. Ajax脚本 #

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

     $(function(){
         $('#id').on('change',function(){
            number =$('#id').val();

             console.log(number)

             $.ajax({
                 type : 'POST',
                 url : "{{route('database.data',lcfirst($name))}}",
                 cache : false,
                 data:function(d){
                     d.number = number; 
                     return d;
                 },

                 success: function(msg){
                     console.log('success')

                 },
             })
         })
     })
 });

出现的错误 #

• 选择id_program=1时，数据输出正确但报“Method Not Allowed”错误；
• 选择id_program=2时，数据输出错误且同样报“Method Not Allowed”错误。

解决步骤 #

1. 修正请求方法不匹配 #

路由定义的是GET请求，但Ajax用了POST，直接修改Ajax的请求类型为GET（因为是获取数据操作，符合REST规范）：

type : 'GET',

2. 修复Ajax请求URL的动态参数问题 #

当前URL硬编码了初始的$name值，无法对应下拉框选择的id_program。改成动态拼接URL：

url : "{{route('database.data', '')}}" + '/' + number,

或者直接用路径拼接：

url : `/program/database/${number}`,

3. 修正控制器查询逻辑 #

• 控制器中用name字段匹配传入的$id，但下拉框传的是id_program，修改查询条件：

$pro = Program::select('nama')->where('id_program', $id)->get();

• 循环中变量取值错误，你查询的是nama字段，却赋值给$name = $p->name，同时处理空结果情况：

$name = '';
foreach ($pro as $p) {
    $name = $p->nama;
}

• compact('nama')中变量名错误，应该是compact('name')，否则视图无法获取该变量。

4. 修复视图变量冲突 #

下拉框循环使用$id作为循环变量，和控制器传入的$id冲突，修改循环变量名：

@foreach ($coba as $program)
    <option value="{{$program->id_program}}">{{ $program->nama}}</option>
@endforeach

5. 完善Ajax的页面更新逻辑 #

当前success回调仅打印日志，需要添加页面内容更新代码。比如页面有个#data-container容器用来展示数据：

success: function(msg){
    $('#data-container').html(msg);
},

同时控制器区分Ajax请求，返回部分视图而非整个页面：

if(request()->ajax()){
    return view('database.partials.data', compact('name','data','pay','pro','id'));
}
return view('database.index', compact('name','data','pay','coba','pro','id'));

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