时间戳

首页 > 解决方案 > Laravel 提交表单而不刷新或重新加载页面

jquery - Laravel 提交表单而不刷新或重新加载页面

问题描述

我有一个 Laravel 5.7 项目，我想到了下一个问题：

当我显示系统上的所有用户时，我有一个表格，当我使用 Active 或 Inactive 时，我有一个名为 Status 的列......

好吧，我的 Blade 中有一个选择选项，我在其中使用 onChange="this.form.submit()"，并且工作正常

我的问题是，如何使用此选择选项更新我的用户表中的状态，而无需重新加载/刷新页面并在我的表中显示新状态？

刀片上的表

<table class="table table-bordred table-striped" align="center">
        <tr align="center" bgcolor="#999999">
        <td>Usuario</td>
        <td>Correo Electrónico</td>
        <td>País</td>
        <td>Status Actual</td>
            <td>Cambiar Status</td>
    </tr>

@foreach($User as $User1)
        <tr>
    <td>{{$User1->name}}</td>
        <td>{{$User1->email}}</td>
        <td>{{$User1->pais}}</td>
            <td>{{$User1->status}}</td>
    <td>
        <form method="post" action="{{route('HomeController.create')}}" enctype="multipart/form-data" id="#myFormID">
            @csrf
            <input type="hidden" name="iduser" value="{{$User1->id}}">
            <select name="status" onchange="this.form.submit()">
                <option value="">Cambiar Status</option>
                @if($User1->status == "Inactivo")
                <option value="Activo" >Activo</option>
                @endif
                @if($User1->status == "Activo")
                <option value="Inactivo">Inactivo</option>
                @endif
            </select>
        </form>
    </td>
        </tr>
@endforeach

</table>

控制器

public function index()
    {
        $User = User::paginate(20);

        return view('home', [

            'User' => $User

        ]);
    }

    public function create(Request $request)
    {
        $iduser = $request->iduser;
        $status = $request->status;

        $User = User::find($iduser);
        $User->status = $status;
        $User->save();

        $request->session()->flash('alert-success', 'Status Actualizado Correctamente');
        return redirect()->back();
    }

标签： jquerylaravelvue.jslaravel-5.7

解决方案

你可以像这样使用ajax

$("#your-select-id").change(function(){
$.ajax({ method:"GET", url:"{{route('your-name-route')}}" },data:{status:$(this).val()})
})

推荐阅读