我想使用JQuery Ajax获取当前类别的子类别以创建帖子。它对我不起作用,但是当我像这样http://127.0.0.1:8000/back/posts/create/json-subcategories?category_id=1更改浏览器上的URL时,它将所有子类别带入数组中
路由页面:
Route::get('/posts/create', ['uses'=>'Admin\PostController@create','as'=>'post-create', 'middleware'=> 'permission:Post List|All'] );
Route::get('/posts/create/json-subcategories', ['uses'=>'Admin\PostController@subcategories','as'=>'post-create', 'middleware'=> 'permission:Post List|All'] );
PostController:
public function create()
{
$page_name = 'Create Post';
$categories = Category::where('status',1)->pluck('name','id');
return view('admin.post.create',compact('page_name','categories'));
}
public function subcategories()
{
$category_id = Input::get('category_id');
$subcategories = Subcategory::where('category_id', '=', $category_id)->get();
return response()->json($subcategories);
}
create.blade.php
<div class="form-group">
<label for="">Your Category</label>
<select class="form-control" name="categories" id="categories">
<option value="0" disable="true" selected="true">=== Select Category ===</option>
@foreach ($categories as $key => $value)
<option value="{{$value}}">{{ $value }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="">Your Subcategory</label>
<select class="form-control" name="subcategories" id="subcategories">
<option value="0" disable="true" selected="true">=== Select Subcategory ===</option>
</select>
</div>
<script src="{{asset('js/jquery.js')}}"></script>
<script type="text/javascript">
$('#categories').on('change', function(e){
console.log(e);
var category_id = e.target.value;
$.get('/posts/create/json-subcategories?category_id=' + category_id,function(data) {
console.log(data);
$('#subcategories').empty();
$('#subcategories').append('<option value="0" disable="true" selected="true">=== Select Subcategory ===</option>');
$.each(data, function(index, subcategoriesObj){
$('#subcategories').append('<option value="'+ subcategoriesObj.id +'">'+ subcategoriesObj.name +'</option>');
})
});
});
</script>
为什么您的URL示例以/back
开头?因为您的路由文件未显示此行为。也许错误是在此构造中找到的,但还有另一个原因。
对我来说,您的问题似乎是您没有正确设置密钥。集合上的pluck()
方法返回给定键的所有值,如下所述:https://laravel.com/docs/5.8/collections#method-pluck
因为也将id
键传递到pluck
方法中,所以name
键的所有值都将用记录的各个id
的值作为键。
所以您的视图应该看起来像这样(未经测试):
...
<select class="form-control" name="categories" id="categories">
<option value="0" disable="true" selected="true">=== Select Category ===</option>
@foreach ($categories as $key => $value)
// changed the value of the value-attribute to the key of the passed collection
<option value="{{$key}}">{{ $value }}</option>
@endforeach
</select>
...
BUT:因为我假设您的subcategory
实体不仅用于category
,而且还用于大多数独立的实体,所以也许您可以考虑以下几点:
您还可以使用Laravels资源功能。https://laravel.com/docs/5.8/controllers#resource-controllers
接收
subcategory
的路径,即使对于特定的父键也不应位于您的类别的创建路径中。它是一个独立的表和数据类型,因此您可以给它一个路由,例如:
Route::get('/category/subcategories/{category}', 'CategoryContoller@getSubcategories');
您可以在前面的示例中看到,我添加了一个路由参数(https://laravel.com/docs/5.8/routing#route-parameters),该参数使您能够直接从路由中调用模型。也可以说,此请求与subcategory
实体有关,因此将在SubcategoryController
中处理。但是,尽管这始终是个人喜好,但对我来说,以这种方式使用它也是更合理的,因为稍后我们将从类别本身接收子类别。因此,我们将在自己的控制器中调用和处理category
模型,这对我来说感觉更好。
要使用此方法,您必须更改/添加2件事:
- 在您的https://laravel.com/docs/5.8/routing#explicit-binding的
boot
方法中设置路由模型绑定(RouteServiceProvider
):
public function boot()
{
parent::boot(); // kept this line if its there, add it if not
Route::model('category', App\Category::class); // add this new line
}
- 向您的模型添加关系:
# Category
public function subcategories() {
$this->hasMany(App\Subcategory::class);
}
# Subcatgory
public function category() {
$this->belongsTo(App\Category::class);
}
之后,您可以在CategoryController
中执行以下操作:
#CategoryController
// the $category model variable is automatically injected and is a retrieved dataset from your database
public function getSubcategories(Category $category) {
$subcategories = $category->subcategories();
return response()->json($subcategories->toArray());
}
Hope this can help a bit.