Laravel dependent select boxes with Ajax - json

Question

I created 3 dependent select boxes in Laravel with Ajax (a reproduction of the code from the original project in wich I use MySQL instead of array): https://github.com/grigore16/laravel_select_boxes. It has only one view and one controller.
It generally works fine, but if I refresh multiple times, I get 500 Internal Server Error (in Chrome's console) and from jQuery I see the error is: xhr.send( options.hasContent && options.data || null ). In a slower computer the error is more often.
Please tell me if the code is ok or not!
This is the view:
<table class='table table-bordered'>
<tr>
<td>Country</td>
<td>City</td>
<td>Street</td>
</tr>
<tr>
<td>
<select id="country" name="country">
<option selected>Germany</option>
</select>
</td>
<td>
<select id="city" name="city">
<option selected>Hamburg</option>
</select>
</td>
<td>
<select id="street" name="street">
<option selected>h1</option>
</select>
</td>
</tr>
</table>
<div>
<script>
var present_country = 'Germany';
var present_city = 'Hamburg';
var present_street = 'h1';
$(document).ready(function(){
$.ajax({
url: 'http://localhost/laravel_select_boxes/public/ajax',
method: "GET",
data: {countries:'test'},
success: function (data) {
$(data.countries).each(function(index, country) {
if(country !== present_country){
$("#country").append(new Option(country));
}
});
var country = $('#country').val();
$.ajax({
url: 'http://localhost/laravel_select_boxes/public/ajax',
method: "GET",
data: {country:country},
success: function (data) {
$(data.cities).each(function(index, city) {
if(city !== present_city){
$("#city").append(new Option(city));
}
});
var city = $('#city').val();
$.ajax({
url: 'http://localhost/laravel_select_boxes/public/ajax',
method: "GET",
data: {city:city},
success: function (data) {
$(data.streets).each(function(index, street) {
if(street !== present_street){
$("#street").append(new Option(street));
}
});
}
});
}
});
}
});
$("#country").change(function() {
$('#city').empty();
$('#street').empty();
var country = $('#country').val();
$.ajax({
url: 'http://localhost/laravel_select_boxes/public/ajax',
method: "GET",
data: {country:country},
success: function (data) {
$(data.cities).each(function(index, city) {
$("#city").append(new Option(city));
});
var city = $('#city').val();
$.ajax({
url: 'http://localhost/laravel_select_boxes/public/ajax',
method: "GET",
data: {city:city},
success: function (data) {
$(data.streets).each(function(index, street) {
$("#street").append(new Option(street));
});
}
});
}
});
});
$("#city").change(function() {
$('#street').empty();
var city = $('#city').val();
$.ajax({
url: 'http://localhost/laravel_select_boxes/public/ajax',
method: "GET",
data: {city:city},
success: function (data) {
$(data.streets).each(function(index, street) {
$("#street").append(new Option(street));
});
}
});
});
});
</script>
and this is the controller:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
class AjaxController extends Controller
{
public function index(Request $request)
{
if($request['countries']){
$countries = ['Germany', 'France'];
return response()->json(['countries'=>$countries]);
}
if($request['country']){
if($request['country'] === 'Germany'){
$cities = ['Hamburg', 'Berlin'];
}
if($request['country'] === 'France'){
$cities = ['Paris', 'Lion'];
}
return response()->json(['cities'=>$cities]);
}
if($request['city']){
if($request['city'] === 'Hamburg'){
$streets = ['h1', 'h2', 'h3'];
}
if($request['city'] === 'Berlin'){
$streets = ['b1', 'b2', 'b3'];
}
if($request['city'] === 'Paris'){
$streets = ['p1', 'p2', 'p3'];
}
if($request['city'] === 'Lion'){
$streets = ['l1', 'l2', 'l3'];
}
return response()->json(['streets'=>$streets]);
}
}
}
Thank you very much!