【问题标题】:Laravel Submit Form without refresh or reload the pageLaravel 提交表单而不刷新或重新加载页面
【发布时间】:2020-12-12 01:58:13
【问题描述】:

我有一个 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();
    }

【问题讨论】:

  • 你应该尝试使用 js ajax 或类似的东西
  • onsubmit="return false;"添加到&lt;form&gt;标签以防止页面刷新
  • 我推荐 Vuejs 用于这种情况。 vuejs 比 jquery 好。如果你想用 vue 实现,我可以告诉你如何启动它。另外 youtube 上还有很多视频,你可以了解一下

标签: jquery laravel vue.js laravel-5.7


【解决方案1】:

你可以像这样使用 ajax

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-11-12
    • 2011-12-21
    • 1970-01-01
    相关资源
    最近更新 更多