我有一个主页,其中有一些菜单包含一些类别,下面有最新帖子:
<ul class="Categories__Menu">
@foreach($categories->take(6) as $category)
<li class="ative">
<a href="" name="category" id="{{$category->id}}">{{$category->name}}</a>
</li>
@endforeach
</ul>
<div class="row" id="posts">
@foreach($posts as $post)
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
<div class="card">
<img class="card-img-top" src="{{$post->image}}" alt="Card image cap">
<h5 class="card-title">{{$post->name}}</h5>
<div class="card-footer d-flex justify-content-between align-items-center">
<a href="{{route('posts.show', ['id' => $post->id, 'slug' => $post->slug])}}" class="btn btn-primary text-white">More</a>
</div>
</div>
</div>
@endforeach
</div>
我希望在点击每个类别时,仅在主页中显示该类别的帖子,但在同一主页中,而不是在特定类别页面中。
所以我有这个Ajax:
$(function() {
$("a[name='category']").on('click', function(){
var category_id = $(this).attr("id");
$.ajax({
url: '{{ route('category.posts',null) }}/' + category_id,
type: 'GET',
success:function(result){
$('#posts').empty();
$.each(result,function(index, postObj){
$('#posts').append("<p>"+postObj.name+"</p>");
});
console.log(result);
},
error: function(error) {
console.log(error.status)
}
});
});
});
它的工作正常,但不是只显示:
$('#posts').append("<p>"+postObj.name+"</p>");
我想用上面的真实html显示帖子,如:
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">
<div class="card">
<img class="card-img-top" src="{{$post->image}}" alt="Card image cap">
<h5 class="card-title">{{$post->name}}</h5>
<div class="card-footer d-flex justify-content-between align-items-center">
<a href="{{route('posts.show', ['id' => $post->id, 'slug' => $post->slug])}}" class="btn btn-primary text-white">More</a>
</div>
</div>
</div>
所以我在ajax中使用这样的东西:
$("a[name='category']").on('click', function(){
var category_id = $(this).attr("id");
alert(category_id);
$.ajax({
url: '{{ route('category.posts',null) }}/' + category_id,
type: 'GET',
success:function(result){
$('#posts').empty();
$.each(result,function(index, postObj){
//$('#posts').append("<p>"+postObj.name+"</p>");
$('#posts').append("<div class=\"col-12 col-sm-6 col-lg-4 col-xl-3 mb-4\">\n" +
" <div class=\"card box-shaddow\">\n" +
" <img class=\"card-img-top\" src=\"{{postObj.image}}\" alt=\"Card image cap\">\n" +
" <h5 class=\"card-title h6 font-weight-bold text-heading-blue\">{{postObj.name}}</h5>\n" +
" <div class=\"card-footer d-flex justify-content-between align-items-center\">\n" +
"\n" +
" <a href=\"{{route('posts.show', ['id' => postObj.id, 'slug' => postObj.slug])}}\" class=\"btn btn-primary text-white\">More</a>\n" +
" </div>\n" +
" </div>\n" +
" </div>");
});
console.log(result);
},
error: function(error) {
console.log(error.status)
}
});
});
但这似乎是一个错误:
Use of undefined constant postObj - assumed 'postObj'
你知道为什么吗?
PostController中:
public function WhereHasCategory(Request $request)
{
$posts = Post::whereHas('categories', function ($categories) use (&$request) {
$categories->where('id',$request->id);
})->get();
return response()->json($posts);
}
路由到ajax部分:
Route::get('posts/where/category/{id}','\PostController@WhereHasCategory')->name('category.posts');
返回主页视图的方法:
public function index(){
return view('home')
->with('categories', Category::orderBy('created_at', 'desc')->get())
->with('posts', Post::orderBy('created_at','desc')->take(8)->get());
}
答案 0 :(得分:0)
确保使用 $ postObj 引用Blade模板中的变量,而不是 postObj 。我可以看到你在 $ 中使用它,例如 标记中的 postObj.image 。