ajax下拉式不顯示laravel中的數據城市

Question

我在使用ajax作爲下拉式城市時遇到了限制。當我點擊省份部分時，它不顯示城市數據。

Screenshoot：

Regency.php

namespace App; 

use Illuminate\Database\Eloquent\Model; 
use RajaOngkir; 

class Regency extends Model 
{ 
    protected $fillable = ['id', 'province_id', 'name']; 

    public static function populate() { 
     foreach (RajaOngkir::Kota()->all() as $kota) { 
      $model = static::firstOrNew(['id' => $kota['city_id']]); 
      $model->province_id = $kota['province_id']; 
      $model->name = $kota['type'] . ' ' . $kota['city_name']; 
      $model->save(); 
     } 
    } 

    public function province() 
    { 
     return $this->belongsTo('App\Province'); 
    } 
} 

Province.php

namespace App; 

use RajaOngkir; 
use Illuminate\Database\Eloquent\Model; 

class Province extends Model 
{ 
    protected $fillable = ['id', 'name']; 

    public static function populate() { 
     foreach (RajaOngkir::Provinsi()->all() as $province) { 
      $model = static::firstOrNew(['id' => $province['province_id']]); 
      $model->name = $province['province']; 
      $model->save(); 
     } 
    } 
} 

AddressController.php

namespace App\Http\Controllers; 

use Illuminate\Http\Request; 

use App\Http\Requests; 
use App\Http\Controllers\Controller; 
use App\Regency; 

class AddressController extends Controller 
{ 
    public function regencies(Request $request) 
    { 
     $this->validate($request, [ 
      'province_id' => 'required|exists:provinces,id' 
     ]); 

     return Regency::where('province_id', $request->get('province_id')) 
      ->get(); 
    } 
} 

廣告dress.blade.php

{!! Form::open(['url' => '/checkout/address', 'method'=>'post', 'class' => 'form-horizontal']) !!} 

    <div class="form-group {!! $errors->has('name') ? 'has-error' : '' !!}"> 
    {!! Form::label('name', 'Nama', ['class' => 'col-md-4 control-label']) !!} 
    <div class="col-md-6"> 
    {!! Form::text('name', null, ['class'=>'form-control']) !!} 
    {!! $errors->first('name', '<p class="help-block">:message</p>') !!} 
    </div> 
</div> 

<div class="form-group {!! $errors->has('detail') ? 'has-error' : '' !!}"> 
    {!! Form::label('detail', 'Alamat', ['class' => 'col-md-4 control-label']) !!} 
    <div class="col-md-6"> 
    {!! Form::textarea('detail', null, ['class'=>'form-control', 'rows' => 3]) !!} 
    {!! $errors->first('detail', '<p class="help-block">:message</p>') !!} 
    </div> 
</div> 

<div class="form-group {!! $errors->has('province_id') ? 'has-error' : '' !!}"> 
    {!! Form::label('province_id', 'Provinsi', ['class' => 'col-md-4 control-label']) !!} 
    <div class="col-md-6"> 
    {!! Form::select('province_id', [''=>'']+DB::table('provinces')->lists('name','id'), null, ['class'=>'form-control', 'id' => 'province_selector']) !!} 
    {!! $errors->first('province_id', '<p class="help-block">:message</p>') !!} 
    </div> 
</div> 

<div class="form-group {!! $errors->has('regency_id') ? 'has-error' : '' !!}"> 
    {!! Form::label('regency_id', 'Kabupaten/Kota', ['class' => 'col-md-4 control-label']) !!} 
    <div class="col-md-6"> 
    {!! Form::select('regency_id', 
     old('province_id') !== null ? DB::table('regencies')->where('province_id', old('province_id'))->lists('name', 'id') : [], 
     old('regency_id'), ['class'=>'form-control', 'id' => 'regency_selector']) !!} 
    {!! $errors->first('regency_id', '<p class="help-block">:message</p>') !!} 
    </div> 
</div> 

<div class="form-group {!! $errors->has('phone') ? 'has-error' : '' !!}"> 
    {!! Form::label('phone', 'Telepon', ['class' => 'col-md-4 control-label']) !!} 
    <div class="col-md-6"> 
    <div class="input-group"> 
     <div class="input-group-addon">+62</div> 
     {!! Form::text('phone', null, ['class'=>'form-control']) !!} 
    </div> 
    {!! $errors->first('phone', '<p class="help-block">:message</p>') !!} 
    </div> 
</div> 

    <div class="form-group"> 
     <div class="col-md-6 col-md-offset-4"> 
      {!! Form::button('Lanjut <i class="fa fa-arrow-right"></i>', array('type' => 'submit', 'class' => 'btn btn-primary')) !!} 
     </div> 
    </div> 

{!! Form::close() !!} 

AJAX

$(document).ready(function() { 
    // checkout address new form 
    if ($('#province_selector').length > 0) { 
    var xhr 
    var province_selector, $province_selector 
    var regency_selector, $regency_selector 

    $province_selector = $('#province_selector').selectize({ 
     sortField: 'text', 
     onChange: function (value) { 
     if (!value.length) { 
      regency_selector.disable() 
      regency_selector.clearOptions() 
      return 
     } 
     regency_selector.clearOptions() 
     regency_selector.load(function (callback) { 
      xhr && xhr.abort() 
      xhr = $.ajax({ 
      url: '/address/regencies?province_id=' + value, 
      success: function (results) { 
       regency_selector.enable() 
       callback(results) 
      }, 
      error: function() { 
       callback() 
      } 
      }) 
     }) 
     } 
    }) 

    $regency_selector = $('#regency_selector').selectize({ 
     sortField: 'name', 
     valueField: 'id', 
     labelField: 'name', 
     searchField: ['name'] 
    }) 

    province_selector = $province_selector[0].selectize 
    regency_selector = $regency_selector[0].selectize 
    } 

}) 

路線

// Checkout 
Route::get('checkout/login', 'CheckoutController@login'); 
Route::post('checkout/login', 'CheckoutController@postLogin'); 
Route::get('checkout/address', 'CheckoutController@address'); 
Route::post('checkout/address', 'CheckoutController@postAddress'); 
Route::group(['middleware' => 'api'], function() { 
    Route::get('checkout/address/regencies', 'AddressController@regencies'); 
}); 
Route::get('checkout/payment', function() { 
    return var_dump(session()->get('checkout')); 
}); 

Answer 1

路線是checkout/address/regencies但你請求/address/regencies。這就是爲什麼你會得到404錯誤

更改您的網址在阿賈克斯

url: '/checkout/address/regencies?province_id=' + value, 

Answer 2

試試這個。

首先，添加type在$.ajax

type: "post" 

然後在你的路線改變get到post。

Route::post('checkout/address/regencies', 'AddressController@regencies');