如何通过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>