为什么我在laravel下拉过滤不工作,并显示双页

q8l4jmvw  于 2023-03-24  发布在  其他
关注(0)|答案(1)|浏览(82)

下面是我的代码下拉过滤类别的职位我很困惑为什么它是返回2个很长的双页在浏览器中。
它显示双页,我很困惑如何通过jquery从控制器获取数据并正确显示它

Route::get('/home', [PostsController::class, 'index'])->middleware('guest');
//MY Controller
class PostsController extends Controller
{
    //show all question in class model posts
    public function index(Request $request){
        $kategories = Kategori::all();
        $provinsi = Provinsi::all();
    
        $posted = posts::whereNotNull('published_at')->get();
        if ($request->has('category_id')) {
            $category_id = $request->input('category_id');
            $posts = posts::where('kategori_id', $category_id)->get();
            return view('main/posts',[
                "posts" => $posts,
                "kategori" => $kategories,
                
            ]);
        } 
        else {
            $posts = posts::all();
            return view('main/posts',[
               
                "posts" => $posts,
                "kategori" => $kategories,
                
            ]);
        }
    }
<!--My Blade-->
@extends('layouts.main')

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

@section('container')
    <div  id="main_posts">
    @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>
        </article>
    </div>
    @endforeach
    </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();
        if (category_id) {
            $.ajax({
                url: '/home',
                type: 'GET',
                data: { category_id: category_id },
                success: function(data) {
                    $('#main_posts').html(data);
                }
            });
        } else {
            $('#main_posts').html('');
        }
    });
    });
</script>
wko9yo5t

wko9yo5t1#

让我们有更新的代码更可靠,更容易理解。我已经添加/修改多个文件。请检查下面的文件,让我知道,如果它会帮助你。

路由/web.php

Route::group(['middleware' => 'guest'], function () {
  Route::get('/home', [PostsController::class, 'index']);
  Route::get('/posts', [PostsController::class, 'getPosts']);
});

app/Http/Controller/PostController.php

class PostsController extends Controller
{
    //show all question in class model posts
    public function index(Request $request){
        $kategories = Kategori::all();
        $provinsi = Provinsi::all();
    
        $posted = posts::whereNotNull('published_at')->get();
        $posts = posts::all();
        return view('main/posts',[
            "posts" => $posts,
            "kategori" => $kategories,
        ]);
    }

    //get posts based on category
    public function getPosts(Request $request){
        $category_id = $request->input('category_id');
        $posts = posts::where('kategori_id', $category_id)->get();
        return view('main/posts_list', [
            "posts" => $posts,
        ]);
    }
}

您的刀片文件

@extends('layouts.main')

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

@section('container')
    <div id="main_posts">
        @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
    </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();
            if (category_id) {
                $.ajax({
                    url: '/posts',
                    type: 'GET',
                    data: { category_id: category_id },
                    success: function(data) {
                        $('#main_posts').html(data);
                    }
                });
            } else {
                $('#main_posts').html('');
            }
        });
    });
</script>

新建刀片文件如下:

<div id="main_posts">
    @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
</div>

相关问题