Laravel分类下拉筛选失效，页面重复显示问题求助

问题 #

在Laravel中实现分类下拉筛选帖子功能，选择分类后浏览器出现重复超长页面，同时不清楚如何通过jQuery从控制器正确获取并展示数据。

核心原因 #

当前控制器无论是否为AJAX请求，都返回完整的页面视图（包含布局、导航等所有内容）。AJAX成功后把整个页面内容塞进#main_posts容器，导致页面嵌套，出现重复的布局结构，最终显示超长重复页面。

解决方案 #

1. 优化控制器逻辑 #

修改控制器，区分AJAX请求和普通请求：AJAX请求仅返回帖子列表的片段视图，普通请求返回完整页面。同时修正模型名（Laravel模型名需大写），简化查询逻辑：

// PostsController.php
class PostsController extends Controller
{
    public function index(Request $request){
        $kategories = Kategori::all();
        // 统一查询逻辑，避免重复代码
        $query = Post::query();
        if ($request->has('category_id')) {
            $query->where('kategori_id', $request->input('category_id'));
        }
        $posts = $query->get();

        // 判断是否为AJAX请求
        if ($request->ajax()) {
            // 返回仅包含帖子列表的片段视图
            return view('main.posts-list', compact('posts'));
        }

        // 普通请求返回完整页面
        return view('main.posts', compact('posts', 'kategories'));
    }
}

2. 创建帖子列表片段视图 #

新建resources/views/main/posts-list.blade.php，把原来主视图中帖子循环的部分移到这里：

<!-- main/posts-list.blade.php -->
@foreach($posts as $p)
<div class="card p-4 rounded-4 mb-4" style="background-color:#171615">
    <article class="mb-5">
        <div class="d-flex">
            <h1><i class="bi bi-person-circle"></i></h1> 
            <h5 class="ms-2 card-title">{{ $p->penanya }}</h5>
            <h5 class="ms-1 card-title">Posted 2 Days ago</h5>
        </div>
        <h4 class="mt-2">{{ $p->judul }}</h4>
        <text>{{ $p->pertanyaan }}</text>
        <div class="mt-3">
            <a href="{{ url('home',$p->slug) }}" class="link-info">See Answer</a>
        </div>
    </article>
</div>
@endforeach

3. 修改主视图 #

在主视图中引入刚才创建的片段视图，同时确保JS逻辑正确：

<!-- main/posts.blade.php -->
@extends('layouts.main')

@section('dropdown')
    <div class="dropdown p-1">
        <select name="category" id="category" class="form-control">
            <option value="" class="text-center">- 选择分类 -</option>
            @foreach($kategories as $k)
                <option value="{{ $k->id }}" class="text-center">{{ $k->nama }}</option>
            @endforeach
        </select>
    </div>
@endsection

@section('container')
    <div id="main_posts">
        <!-- 引入帖子列表片段 -->
        @include('main.posts-list')
    </div>
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#category').on('change', function() {
        var category_id = $(this).val();
        $.ajax({
            url: '/home',
            type: 'GET',
            data: { category_id: category_id },
            success: function(data) {
                $('#main_posts').html(data);
            },
            error: function() {
                $('#main_posts').html('<p>加载失败，请重试</p>');
            }
        });
    });
});
</script>

4. 额外优化点 #

• 模型名统一大写：posts改为Post（确保模型文件名为Post.php）
• 移除控制器中未使用的$provinsi和$posted变量
• 空分类时无需清空容器，直接请求所有帖子即可

内容的提问来源于stack exchange，提问作者Just Student