Dropdown Ajax Laravel ( Append, onChange, Method not Allowed ) - php

Question

i just learn about Ajax. I am so confused and getting error after following some tutorials. The plan is after we get the id_program, we can change or reload the page to show the data inside the dropdown menu after we clicks it. May someone help me please?
1.1 Database ( Program )
1.2 Inside Payment
1.3 Inside actor
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'));
}
Route
Route::get('program/database/{database}', [DatabaseController::class,'data'])->name('database.data');
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>
Ajax Script
$(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')
},
})
})
})
});
Result (Error)
a. ( id_program = 1 ) Correct data output & Method Not Allowed error
b. ( id_program = 2 ) Incorrect data output & Method Not Allowed error
Thank you for the helps

Answer 1

Route::get('program/database/{database}', [DatabaseController::class,'data'])->name('database.data');
see the "get" key word? You are declare this route as a GET route, but your AJAX method:
$.ajax({
type : 'POST',
url : "{{route('database.data',lcfirst($name))}}",
....
is a POST request.
The solution is:
if your request only GET some data (no create, no delete, no update,... any data), then $.ajax({ type : 'GET', ....
if your request do modify data, then Route::post('program....