Laravel: Ajax динамически зависимый выпадающий

Question

когда я выбираю конкретную страну в поле выбора, тогда в поле выбора состояния должны быть заполнены данные о состоянии выбранной страны и так далее.Но после выбора страны (поле выбора родителя) провинция (дочерний элемент) все еще пуста.Событие (в консоли браузера) передает выбранное значение, а затем выдает ошибку (см. Результат).

Я пробовал этот код с различными версиями Laravel: 5.4 - 5.7.Я не очень хорош с AJAX.

CountryController.php

---

<?php

namespace App\Http\Controllers;

use IlluminateHttpRequest;
use IlluminateSupportFacadesInput;

use App\Provinces;
use App\Regencies;
use App\Districts;
use App\Villages;


class CountryController extends Controller
{
public function provinces(){
  $provinces = Provinces::all();
  return view('country.index', compact('provinces'));
}

public function regencies(){
  $provinces_id = Input::get('province_id');
  $regencies = Regencies::where('province_id', '=', $provinces_id)->get();
  return response()->json($regencies);
}

public function districts(){
  $regencies_id = Input::get('regencies_id');
  $districts = Districts::where('regency_id', '=', $regencies_id)->get();
  return response()->json($districts);
}

public function villages(){
  $districts_id = Input::get('districts_id');
  $villages = Villages::where('district_id', '=', $districts_id)->get();
  return response()->json($villages);
 }
}

---

МОДЕЛИ

---

Район:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Districts extends Model
{
protected $table = 'districts';
}

Провинции:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Provinces extends Model
{
 protected $table = 'provinces';
}

Regencies:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Regencies extends Model
{
 protected $table = 'regencies';
}

Villages:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Villages extends Model
{
protected $table = 'villages';
}

---

ПРОСМОТР: index.blade.php

---

      <div class="form-group">
        <label for="">Your Provinces</label>
        <select class="form-control" name="provinces" id="provinces">
          <option value="0" disable="true" selected="true">=== Select Provinces ===</option>
            @foreach ($provinces as $key => $value)
              <option value="{{$value->id}}">{{ $value->name }}</option>
            @endforeach
        </select>
      </div>

      <div class="form-group">
        <label for="">Your Regencies</label>
        <select class="form-control" name="regencies" id="regencies">
          <option value="0" disable="true" selected="true">=== Select Regencies ===</option>
        </select>
      </div>

      <div class="form-group">
        <label for="">Your Districts</label>
        <select class="form-control" name="districts" id="districts">
          <option value="0" disable="true" selected="true">=== Select Districts ===</option>
        </select>
      </div>

      <div class="form-group">
        <label for="">Your Villages</label>
        <select class="form-control" name="villages" id="villages">
          <option value="0" disable="true" selected="true">=== Select Villages ===</option>
        </select>
      </div>

    </form>
  </div>
</div>


<script type="text/javascript">
  $('#provinces').on('change', function(e){
    console.log(e);
    var province_id = e.target.value;
    $.get('/json-regencies?province_id=' + province_id,function(data) {
      console.log(data);
      $('#regencies').empty();
      $('#regencies').append('<option value="0" disable="true" selected="true">=== Select Regencies ===</option>');

      $('#districts').empty();
      $('#districts').append('<option value="0" disable="true" selected="true">=== Select Districts ===</option>');

      $('#villages').empty();
      $('#villages').append('<option value="0" disable="true" selected="true">=== Select Villages ===</option>');

      $.each(data, function(index, regenciesObj){
        $('#regencies').append('<option value="'+ regenciesObj.id +'">'+ regenciesObj.name +'</option>');
      })
    });
  });

  $('#regencies').on('change', function(e){
    console.log(e);
    var regencies_id = e.target.value;
    $.get('/json-districts?regencies_id=' + regencies_id,function(data) {
      console.log(data);
      $('#districts').empty();
      $('#districts').append('<option value="0" disable="true" selected="true">=== Select Districts ===</option>');

      $.each(data, function(index, districtsObj){
        $('#districts').append('<option value="'+ districtsObj.id +'">'+ districtsObj.name +'</option>');
      })
    });
  });

  $('#districts').on('change', function(e){
    // console.log(e);
    var districts_id = e.target.value;
    $.get('/json-village?districts_id=' + districts_id,function(data) {
      // console.log(data);
      $('#villages').empty();
      $('#villages').append('<option value="0" disable="true" selected="true">=== Select Villages ===</option>');

      $.each(data, function(index, villagesObj){
        $('#villages').append('<option value="'+ villagesObj.id +'">'+ villagesObj.name +'</option>');
      })
    });
  });


</script>

МАРШРУТ:

---

Route::get('/indonesia','CountryController@provinces');

Route::get('/json-regencies','CountryController@regencies');

Route::get('/json-districts', 'CountryController@districts');

Route::get('/json-village', 'CountryController@villages');

Результат:

---

Пожалуйста, посмотрите здесь ошибку

Answer 1

Убедитесь, что вы импортировали входные фасады, если собираетесь использовать первую опцию:

use Illuminate\Support\Facades\Input;

public function regencies(Request $request){
  $provinces_id = $request->province_id;
  $regencies = Regencies::where('province_id', '=', $provinces_id)->get();
  return response()->json($regencies);
}

ИЛИ

Импортируйте HTTP-запрос и используйте вторую опцию:

use Illuminate\Http\Request;

public function regencies(Request $request){
  $provinces_id = $request->province_id;
  $regencies = Regencies::where('province_id', '=', $provinces_id)->get();
  return response()->json($regencies);
}

Answer 2

Пожалуйста, объявите Input Facade, чтобы использовать его в вашем контроллере.

use Illuminate\Support\Facades\Input;

Пожалуйста, попробуйте это и дайте мне знать, как это работает :)