如何使用 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">

          @foreach ($users as $user)

      <button class="btn btn-primary" data-toggle="modal" data-target="#edit" id ="uid" data-id="{{$user->id}}">

        click here

        </button>

          @endforeach

          @csrf

        <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">

                        <div id="user">

                            <h1 id="name"></h1>

                            <p id="email"></p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

  </div>

JS代码：

<script>

        /* eslint disabled */

        $(

            () => {

                $('#uid').click(

                    (e) => {

                    var uid = $(event.target).data('id');

                    $.ajax({

                        type: 'POST',

                        url: 'users/' + uid,

                        data: {'_token': $("input[name='_token']").val()},

                        success: function(data){

                            // or use : $('#user').html(data);

                            $('#user #name').text(data.name);

                            $('#user #email').text(data.email);

                        }

                    });

                }

                );

            }

        );

    </script>

控制器（路由）POST 请求：

Route::post('users/{id}', function ($id) {

    $data = \DB::table('users')->where('id', $id)->first();

    return response()->json($data, 200);

});

此代码允许客户端，对于数据库中的每个用户，都有打开弹出窗口的模式按钮，单击用户的按钮后，我会弹出一个包含该用户的邮件和名称的弹出窗口