Php 使用AJAX单击某个类别时，如何列出该类别的帖子？

在主页上有一个包含一些类别的菜单，下面是最新的10篇文章

一篇文章可以有多个类别，一个类别可以属于多篇文章，因此有两个模型和一个数据透视表“category_post”，其中有两列：id和name

因此，在主页中，有一个包含一些类别和帖子的菜单：

  <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>

发送到主页：

Route::get('/', [
    'uses' => 'FrontController@index',
    'as'   =>'index'
]);

class Post extends Model
{
    public function categories(){
        return $this->belongsToMany('App\Category');
    }
 }
 class Category extends Model
{
    public function posts(){
        return $this->belongsToMany('App\Post');
    }
}

帖子和分类模型：

Route::get('/', [
    'uses' => 'FrontController@index',
    'as'   =>'index'
]);

class Post extends Model
{
    public function categories(){
        return $this->belongsToMany('App\Category');
    }
 }
 class Category extends Model
{
    public function posts(){
        return $this->belongsToMany('App\Post');
    }
}

在这个主页的底部，我有下面的ajax

@section('scripts')
    <script>
$(function() {
    $("a[name='category']").on('click', function(){

        var category_id =$(this).attr("id");
        alert("test");

        $.get('/ajax-category?category_id=' + category_id, function (data) {
            $('#posts').empty();
            $.each(data,function(index, postObj){
                $('#posts').append('');
            });
        });
    });
 });
</script>
@stop

---

仅在API路由中为SQL查询添加一个新路由，类似以下路由：

Route::get('posts/where/category/{id}','\Posts@WhereHasCategory')->name('category.posts');

然后在WhereHasCategory函数中返回相关帖子：

API控制器（类别）： 后期模型（多对多关系）： 你会得到那些有$request->id分类的帖子

对于Ajax部分，您必须向上述路径发出Ajax请求，您将获得所需的帖子，因此，一旦更改完主页内容（如果您使用的是VueJS或类似的Javascript框架，这非常简单）。。。我想就这些吧

针对您的ajax请求尝试以下方法：

标题：帖子在这里

$（函数（）{
$（[name='category']）。在（'click'，function（）上{
var category_id=$（this.attr（“id”）；
$.ajax({
url:“https://jsonplaceholder.typicode.com/posts",
键入：“GET”，
成功：功能（结果）{
$（'#posts'）.empty（）；
$.each（结果、函数（索引、postObj）{
$（“#posts”）。追加（“
”+postObj.title+”
“+postObj.body+”
”）；
});
},
错误：函数（错误）{
console.log（error.status）
}
});
});
});

我认为您的ajax不起作用，因为当您单击类别链接时，页面正在刷新，请尝试在href属性中添加标签

exsampel：

<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>

@foreach（$categories->将（6）作为$categories）


@endforeach

或者用

更改

---

对不起我的英语。我希望这会有所帮助。

您的html中没有

id=category

，但您正在使用它作为

$（“#category”）的选择器。在（'click'.

谢谢，我更新了这个问题来纠正这个问题。

'/ajax category？category_id'+category_id

似乎遗漏了一个

=

。但不确定从你发布的代码中应该调用什么。你有pivot表的模型吗？@jon最简单的方法是你必须为pivot表创建一个模型，否则你必须为pivot表创建一个模型如果你想为pivot Table创建一个模型，我可以用DB querybuilder写很多文档。谢谢。我有上面的ajax，但甚至没有“警报（“测试”）；”正在工作。你知道为什么吗？不知道，它在我的浏览器中工作得很好！检查你的JS库加载顺序，确保它们链接正确，首先你必须加载jquery，然后再加载JS脚本。顺便说一句，总是在任务结束时编写脚本page@jon试试这个（已编辑）@jon检查你的API，确保一切正常，当你打开此链接时：

proj.test/posts/where/category/category\u name

（将category\u name更改为你的类别名称，如果你想使用ID，只需更改你的API函数）您必须看到函数的JSON输出，因此只需返回POST，这很简单，最后只需查看JS中的

postObj

queries@jon只需使用我所写的，好的

（答案编辑）

？我测试了它，它工作了！：）

public function Categories () {
    return $this->belongsToMany(Category::class,'post_category','post_id','category_id');
}

<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>