Question

在主页上有一个包含某些类别的菜单，下面是最新的10个帖子。

帖子可以包含多个类别，一个类别可以属于多个帖子，因此有2个模型和一个数据透视表“category_post”，其中包含2列：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>

我希望在点击每个类别时，仅在主页中显示该类别的帖子，但在同一主页中，而不是在特定类别页面中。所以也许最好的方法是使用AJAX。

我不理解控制器和路由中的必要内容，而jquery也无法正常工作。您是否知道在使用AJAX单击某个类别时如何列出帖子？

在 Frontcontroller 中，我已将类别和帖子传递到主页视图：

class FrontController extends Controller
public function index(){
        return view('home')
            ->with('categories', Category::orderBy('created_at', 'desc')->get())
    ->with('posts', Post::orderBy('created_at','desc')->take(10)->get());

    }
  }

前往主页的路线：

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

数据透视表“category_post”结构

 public function up()
    {
        Schema::create('category_post', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('post_id');
            $table->integer('category_id');
            $table->timestamps();
        });
    }

Answer 1

只需在您的API路由中为您的SQL查询添加新路由，例如以下路线：

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

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

API控制器（WhereHasCategory）：

public function WhereHasCategory(Request $request)
{
    $posts = Post::whereHas('categories', function ($categories) use (&$request) {
        $categories->where('id',$request->id);
    })->get();

    return response()->json($posts);
}

发布模型（多对多关系）：

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

您将获得具有$ request-＆gt; id类别

的帖子

对于你的Ajax部分，你必须向上面的路线发出ajax请求，你会得到你想要的帖子，所以一旦你完成了改变主页的内容（如果你正在使用VueJS或类似的Javascript框架，它真的很容易）......我认为这就是全部！

试试这个ajax请求：

＆＃13;

    <a name="category" id="2018" href="#">
        Category
    </a>
    
    <div id="posts">
        <p>Title : Posts Are Here !</p>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script>
        $(function() {
            $("a[name='category']").on('click', function(){
    
                var category_id = $(this).attr("id");
    
                $.ajax({
                    url:"https://jsonplaceholder.typicode.com/posts",
                    type: 'GET',
                    success:function(result){
    
                        $('#posts').empty();
                        $.each(result,function(index, postObj){
                            $('#posts').append("<li>"+postObj.title+"</li><p>"+postObj.body+"</p>");
                        });
                        console.log(result);
                    },
                    error: function(error) {
                        console.log(error.status)
                    }
                });
    
            });
        });
    </script>

＆＃13;

请记住，始终将您的Javascript查询保留在页面末尾

Answer 2

我认为您的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>

或使用<a>更改<span>。

抱歉我的英语。我希望它会有所帮助。

使用AJAX单击类别时如何列出类别的帖子？

2 个答案:

API控制器（WhereHasCategory）：

发布模型（多对多关系）：