Question

我有这个公司列表，我想在不刷新页面的情况下使用按钮激活/停用它们，所以当我按下“激活/停用”按钮时，公司的状态会发生变化，按钮也会从激活变为停用，反之亦然。

这是列表视图的按钮：

<!-- entreprises datatable-->
<div class="panel-body">
    <table id="datatable" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>id</th>
                <th>RS</th>
                <th>Secteur</th>
                <th>Telephone</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
           @foreach($resultas as $resultat)
           <tr>
               <td>{{ $resultat->id}}</td>
               <td style="width:100%">{{ $resultat->RS}}</td>
               <td>{{ $resultat->secteur}}</td>
               <td>{{ $resultat->Tel1}}</td>
               <td style=" display:flex">
                   <div><a href="{{ route('CP_edit',['id'=> $resultat->id]) }}"><button style="background-color:#584F6C" type="button" class="btn btn-secondary btn-sm"> Modifier</button></a></div>
                   <div>
                       @if( $resultat->active == 0 )
                   <a href="{{ route('CP_activate', ['id'=> $resultat->id, 'activation'=> $resultat->active]) }}"><button  style="background-color:#3CB371; margin-left:20px;" name="activation" value="{{ $resultat->active }}" type="button" class="btn btn-secondary btn-sm"> Activate</button></a>
                       @else
                       <a href="{{ route('CP_activate', ['id'=> $resultat->id, 'activation'=> $resultat->active ]) }}"> <button  style="background-color:#B22222; margin-right:20px;" name="activation" value="{{ $resultat->active }}" type="button" class="btn btn-secondary btn-sm"> Deactivate</button></a>
                       @endif
                   </div>
                </td>
           </tr>
           @endforeach
        </tbody>
    </table>
</div>

这是改变公司状态的控制器功能：

public function CP_activate(Request $request)
{
    $state = $request->activation;
    $info = entreprise::find($request->id);

    if( $state == 1)
    {
        $info->active = 0;

        $info->save();
    }

    if( $state == 0)
    {
        $info->active = 1;

        $info->save();
    }
}

我使用的是 POST 方法，我不知道是否应该切换到 GET 。如果您对如何使其工作有任何想法，请。

Answer 1

您需要使用 Javascript ajax 而不是使用 <a> 锚标记

查看

此外，如果您使用 vue.js 或任何其他前端框架，请检查其对 ajax 请求的实现

Answer 2

因此，最好的方法是执行 AJAX 请求而不是普通表单。

因此，基于您的 Blade 模板，您已经有了一个 JS 函数，可以监听按钮/链接的点击以进行切换。

假设您的函数正在重定向/刷新您的页面，您必须这样做：

您的函数不应该发送元素本身，就好像您没有发送任何内容一样，您已经收到了 Event 并且它保存了触发它的元素。
所以你的函数应该像 onclick="activate" 并且它应该可以工作。
在你的函数声明中，你应该有：

function activate(event) {
    event.preventDefault(); // <--- this is the magic part that will not go to that URL or refresh the page
    /* now you should do an AJAX call to that URL with the data you want,
     * so if you want to read the value or anything about that <a> tag, you
     * can do event.target and is the same as your previous "this"
     */
}

您的控制器代码可以简化，但它有一个“缺点”：

public function CP_activate(Request $request)
{
    $info = entreprise::find($request->id);

    $info->active = !$info->active;
    $info->save();
}

“缺点”是，如果您打开多个页面（多次同一页面），并且您单击按钮，它将切换活动状态，而不是告诉它具有什么状态，但它的代码更少，简化了，对于某人打开两次或更多次相同页面是非常奇怪的......

无论如何，请分享您的 activate JS 函数！

在不刷新页面的情况下更改数据库和按钮状态 - laravel

2 个答案: