如何通过ajax调用控制器并从数据库中获取数据到模态字段中？

Question

*我是初学者，请饶恕我。 我正在使用代码点火器。 我有一个表，在这个表中有一个按钮编辑。 单击编辑按钮时，它将显示一个弹出模式。 这样做的主要目的是更新特定的行数据，例如名称密码等。这就是为什么我调用模式弹出窗口，该窗口显示了一个我要显示特定记录的表格，以便我可以编辑该记录并单击“更新”，这将更新记录。 我只想显示特定记录，因为每一行都有其自己的编辑按钮。 我可以通过php更改记录。 但需要显示它。 这是我的模式弹出窗口，也是显示数据库中数据的表。 有人请告诉我们完成这项工作的代码是什么。 我需要完整的ajax代码，因此任何有好心的人都请编写该代码，以便我可以进入我的网站。 请帮忙。 这就是我所知道的，并且我已经共享了代码：

    <div class="modal fade bs-example-modal-lg" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2">
                         <div class="modal-dialog" role="document">
                        <div class="modal-content">
                        <div class="modal-header">

                                 <h4 class="modal-title" id="exampleModalLabel1">Update Current User</h4>
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                        <div class="modal-body">
                                                <div class="card">
                                                <div class="card-header">
                                                    End User Info
                                                </div>
                                                <div class="card-body">
                                <form action="<?php echo base_url()."User_area/add_new_subusers"?>" method="post" id="newuserform" class="form-horizontal">
                                    <div class="form-body">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group row">
                                                    <label class="control-label text-right col-md-5">First Name:</label>
                                                    <div class="col-md-7">
                                                        <input type="text" class="form-control" id="subufname" value="" name="subufname" placeholder="Enter First Name"></input>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group row">
                                                    <label class="control-label text-right col-md-5">Last Name:</label>
                                                    <div class="col-md-7">
                                                        <input type="text" class="form-control" name="subulname" id="subulname" value="" placeholder="Enter Last Name"></input>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group row">
                                                    <label class="control-label text-right col-md-5">Email:</label>
                                                    <div class="col-md-7">
                                                        <input type="text" class="form-control" id="subuemail" name="subuemail" value="" placeholder="Enter Email"></input>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--/span-->
                                            <div class="col-md-12">
                                                <div class="form-group row">
                                                    <label class="control-label text-right col-md-5">Password:</label>
                                                    <div class="col-md-7">
                                                        <input type="text" class="form-control" name="subupass" id="subupass" placeholder="New Password"></input>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--/span-->
                                            <div class="col-md-12">
                                                <div class="form-group row">
                                                    <label class="control-label text-right col-md-5">Confirm Password:</label>
                                                    <div class="col-md-7">
                                                        <input type="text" class="form-control" id="subuconfirmpass" placeholder="Confirm New Password"></input>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--/span-->

                                        </div>
                                    </div>

                                                </div>
                                                </div>



                               </div>
                                <div class="modal-footer">
                                                <input type="submit" id="createnewuser" value="Update" class="btn btn-primary">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                </div>

                        </div>
                </div></div>
                <div class="card">
                            <div class="card-header">

                            </div>
                            <div class="card-body">
                                <div class="table-responsive m-t-40">
                                    <table id="myTable" class="table table-bordered table-striped">
                                        <thead style="background: #37a000; color: #fff;">
                                            <tr>
                                                <th>Name</th>
                                                <th>Email/Username</th>
                                                <th>Password</th>

                                                <th>User Role</th>
                                                <th>Email Notification</th>
                                                <th>Client Access</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
 <!-- ******************************Displaying Data*************************************************************** -->
                                        <tbody>

<?php
foreach($profle as $row):  ?>
        <tr>   
         <td><?echo $row['fname']?></td>
         <td><?echo $row['email']?></td>
         <td><?echo $row['password']?></td>
         <td><?echo $row['user_role']?></td>
         <td>***</td>
         <td>***</td>
         <td><a class="btn btn-success" style="color:white;background-color:green;padding:0px 2px;" data-toggle="modal" data-target="#exampleModal2">edit</a></td>
       </tr>
       <?php  endforeach; ?>

</tbody>
                                    </table>
                                </div>
                            </div>

Answer 1

简单的ajax为您服务。 希望它可以帮助您

ajax脚本：

<script>
    $(document).ready(function(){
        $("#popup-button").click(function(event){
            event.preventDefault();
            var profle_id =$(this).children().val();

            $.ajax({
                url: "HERE FILE CONTROLLER",
                type : 'get',
                data: "id="+profle_id,
                dataType : 'json',
                success: function(result){ // result ='{ "fname":"John", "email":"abc@gmail", "password":"New York" , "user_role":"York" }';
                    $('#subufname').val(result['name']);
                    $('#subulname').val(result['email']);
                    $('#subuemail').val(result['password']);
                    $('#subupass').val(result['user_role']);

                }
            });
        });
    });
</script>

编辑表：

<tr>
                        <td><?echo $row['fname']?></td>
                        <td><?echo $row['email']?></td>
                        <td><?echo $row['password']?></td>
                        <td><?echo $row['user_role']?></td>
                        <td>***</td>
                        <td>***</td>
                        <td><a class="btn btn-success" style="color:white;background-color:green;padding:0px 2px;" data-toggle="modal" data-target="#exampleModal2" id = "popup-button">edit<input type="hidden" value ="$row['id']" ></a></td>

                    </tr>