如何使用 AJAX 将值表单控制器获取到弹出窗口中

Question

我想从控制器获取数据并在单击按钮时将其显示在 html 弹出窗口中。

此时，单击按钮时将显示 POPUP，但未加载数据

此时，我需要单击加载值并将其显示在弹出窗口中。

索引.blade.php

 <button data-toggle="modal" data-target="#edit" id ="uid" name="uid" value="<?php echo $user->id ?>">

    </button>

    

    <div class="modal fade" id="edit" tabindex="-1" role="">

        <div class="modal-dialog" role="document">

            <div class="modal-content">

                <div class="card card-signup card-plain">

                    <div class="modal-header">

                        <div class="card-header card-header-primary text-center">

                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">

                                <i class="material-icons">clear</i>

                            </button>

                            <h4 class="card-title">Editar</h4>

    

                        </div>

                    </div>

                    <div class="modal-body">

                        <form class="form" method="POST" action = "{{ route('/alteruser') }}" name = 'user'>

             @csrf

    

                             <div class="card-body">

                                <div class="form-group bmd-form-group">

                                    <div class="input-group">

                                        <div class="input-group-prepend">

                                            <div class="input-group-text">

                                                <i class="material-icons"></i>

                                            </div>

                                <button type="submit" class="btn btn-primary btn-link btn-wd btn-lg" name = 'uid'>Confirmar</a>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    </div>

我是 AJAX 新手，所以我认为错误就在其中

Answer 1

以下是您尝试执行的操作的示例：GET 请求的控制器：$users = \App\User::all();return view('users', ['users' => $users]);查看用户：<div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @foreach ($users as $user)&nbsp; &nbsp; &nbsp; <button class="btn btn-primary" data-toggle="modal" data-target="#edit" id ="uid" data-id="{{$user->id}}">&nbsp; &nbsp; &nbsp; &nbsp; click here&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @endforeach&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @csrf&nbsp; &nbsp; &nbsp; &nbsp; <div class="modal fade" id="edit" tabindex="-1" role="">&nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-dialog" role="document">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card card-signup card-plain">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="card-header card-header-primary text-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="material-icons">clear</i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="card-title">Editar</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="user">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 id="name"></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p id="email"></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>JS代码：<script>&nbsp; &nbsp; &nbsp; &nbsp; /* eslint disabled */&nbsp; &nbsp; &nbsp; &nbsp; $(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#uid').click(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var uid = $(event.target).data('id');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: 'users/' + uid,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {'_token': $("input[name='_token']").val()},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // or use : $('#user').html(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#user #name').text(data.name);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#user #email').text(data.email);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; </script>控制器（路由）POST 请求：Route::post('users/{id}', function ($id) {&nbsp; &nbsp; $data = \DB::table('users')->where('id', $id)->first();&nbsp; &nbsp; return response()->json($data, 200);});此代码允许客户端，对于数据库中的每个用户，都有打开弹出窗口的模式按钮，单击用户的按钮后，我会弹出一个包含该用户的邮件和名称的弹出窗口