ajax() in Laravel 7 - ajax

Question

My AJAX code is like below
$('select[id="state"]').on('change', function() {
var stateID = $(this).val();
if(stateID) {
$.ajax({
url: '/cities',
type: "GET",
data: { id: 7},
success:function(data) {
$('select[name="city"]').empty();
$.each(data, function(key, value) {
$('select[name="city"]').append('<option value="'+ key +'">'+ value +'</option>');
});
},
error: function(xhr, status, error){
var errorMessage = xhr.status + ': ' + xhr.statusText
alert('Error - ' + errorMessage);
}
});
}else{
$('select[name="city"]').empty();
}
});
My route is like below
Route::get('/cities/{id}', 'LocationController#getSelectedCityajax');
My controller code is like below
public function getSelectedCityajax($id)
{
return response()->json([
'success'=>'get your data'
]);
}
But I am getting result like below
Error - 400: Bad Request

Answer 1

If your route is -Route::get('/cities/{id}', 'LocationController#getSelectedCityajax');
then ajax call should be-
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
},
})
$('select[id="state"]').on('change', function() {
var stateID = $(this).val();
if(stateID) {
$.ajax({
url: '/cities/7',
type: "GET",
success:function(data) {
$('select[name="city"]').empty();
$.each(data, function(key, value) {
$('select[name="city"]').append('<option value="'+ key +'">'+ value +'</option>');
});
},
error: function(xhr, status, error){
var errorMessage = xhr.status + ': ' + xhr.statusText
alert('Error - ' + errorMessage);
}
});
}else{
$('select[name="city"]').empty();
}
});
and if u want send data by post request then route should be -
Route::post('/cities', 'LocationController#getSelectedCityajax');
AJAX Request would be -
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
},
})
$.ajax({
url: '/cities',
type: "post",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { id: 7},
success:function(data) {
$('select[name="city"]').empty();
$.each(data, function(key, value) {
$('select[name="city"]').append('<option value="'+ key +'">'+ value +'</option>');
});
},
error: function(xhr, status, error){
var errorMessage = xhr.status + ': ' + xhr.statusText
alert('Error - ' + errorMessage);
}
});
And controller code -
public function getSelectedCityajax(Request $request)
{
$id = $request->get('id');
return response()->json([
'success'=>'get your data'
]);
}