在新页面上加载列表的正确详细信息

Posted 2023-03-14

【中文标题】在新页面上加载列表的正确详细信息

【英文标题】：Loading correct details of a listing on a new page

【发布时间】：2022-01-03 19:37:53

【问题描述】：

我对 Laravel 还很陌生，因此我不知道很多“Laravel 术语”之类的东西，所以搜索我的意思有点困难，但我希望我的问题是可以理解的。

但我有一个显示不同职位列表的网站，如下所示：

https://i.stack.imgur.com/Cz7ql.jpg

正如您在右侧看到的那样，有 2 个按钮，上一个用于“立即申请”，下一个用于“详细信息”（有关工作的详细信息），例如当用户单击“详细信息”时" 按钮加载新视图，其中包含有关作业的详细信息

现在我的问题是，当用户点击详细信息按钮时，是否可以自动显示正确的详细信息？ 如何实现 laravel 显示与列表匹配的详细信息？

这是我输出列表的刀片代码：

@extends('layouts.app')

@section('content')
    <style>
        .container 
            display: flex;
            justify-content: center;
            align-items: center;
        
    </style>
    <div class="flex justify-center">
        <div class=" w-11/12 bg-gray-400 p-6 rounded-lg font-serif text-4xl font-bold bg-opacity-70 subpixel-antialiased tracking-wide not-italic">
            <h1 class="flex justify-center mb-10"> Übersicht der Stellenanzeigen </h1>

            @if ($posts->count())
                @foreach($posts as $post)
                    <div class="p-10 grid-cols-3 grid-rows-3 gap-4 shadow-2xl mb-10 bg-gradient-to-r from-green-400 to-blue-500 border-solid border-2 border-black rounded-lg">
                        <!--Card 1-->
                        <div class="overflow-hidden row-span-3 bg-gray-100 shadow-2xl border-solid border-2 border-gray-500 rounded-lg">
                            <div class="pt-2 pl-6 mt-3">  $post->Titel </div>
                            <div class="px-6 py-4 mt-2 ring-4 ring-opacity-90">
                                <button type="submit" class="text-white px-4 py-3 rounded text-base font-medium
                                bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
                                duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" onclick="window.location='  url('bewerben') '">Direkt bewerben!</button>


                                <div class="pt-2 pl-4 font-medium text-base font-bold font-serif"> Standort:  $post->Standort </div>

                                <div class="pt-2 pl-4 font-medium text-base font-bold font-serif"> Kontakt:  $post->Kontakt </div>
                                <button type="submit" class="text-white px-4 py-3 rounded text-base font-medium
                                bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">Details!</button>
                                <div class="pt-2 pl-4 font-medium text-base font-bold font-serif"> Startdatum:  $post->startdate </div>
                                <div class="pt-2 pl-4 font-medium text-base font-bold font-serif"> Enddatum:  $post->enddate </div>


                                <div class="px-6 pt-4 pb-2"> </div>
                            </div>

                        </div>
                    </div>
                        @endforeach

                        @endif
                    </div>

        </div>

@endsection

我从理论上考虑了实现它的方法，并提出了两个至少对我来说听起来可能可行的逻辑：

我必须以某种方式“保存”列表的 ID，以便当用户单击第三个列表的按钮时，详细信息会显示在下一个视图中，这些视图来自数据库中的列表，其 ID 与第三个清单。

我可以使用列表的标题来搜索具有相同标题的数据库条目的详细信息，但是我认为这至少可以说有点愚蠢，因为每个标题都必须是唯一的。

任何食物都值得赞赏！

编辑：我被禁止提问，因为我的问题没有被赞成，但得到了回答，并且在 cmets 中进行了一些很好的讨论。但是堆栈交换团队告诉我编辑我的问题以使其更清楚，但他们收到了答案，所以我认为他们很清楚。我不是以英语为母语的人，所以我的英语不是最好的，我无法表达自己那么好。但他们告诉我编辑它们，使它们看起来像新的并且可以被投票。我不明白为什么这样做是有道理的，但如果我得到一些支持，也许它会解除我的问题禁令，所以如果你不介意的话，可以支持。

【参考方案1】：

您可以使用 AJAX 来获取详细信息。您可以使用标签作为按钮来代替此按钮。

<button type="" class="text-white px-4 py-3 rounded text-base font-medium bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">Details!</button>

<a type="button" class="text-white px-4 py-3 rounded text-base font-medium bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100" onclick="get_detail('$post->id'">

在“get_detail”函数中传递您特定工作的 ID。 那么你就可以很方便的使用这个id通过AJAX获取数据了

【讨论】：

您好，感谢您花时间回答我的问题！然后将数据加载到新屏幕上时，这是否也有效？