如何使用 bootstrap 和 Ajax 根据所选 ID 从 MySQL 数据库中获取数据？

Posted 2023-02-24

【中文标题】如何使用 bootstrap 和 Ajax 根据所选 ID 从 MySQL 数据库中获取数据？

【英文标题】：How can I get the data from MySQL database based on the selected ID using bootstrap and Ajax?

【发布时间】：2019-09-17 20:49:38

【问题描述】：

我有两个 php 页面，第一个 php 页面包含表，其中包含将使用 Bootstrap 模式编辑的记录的选择，第二个 php 页面处理要在 mysql 数据库中更新的数据。

这是第一个 php 页面 (edit_account.php)

<?php
$cn = mysqli_connect("localhost","root","","testdb");
$sql = "SELECT * FROM tblinfo";
$qry = mysqli_query($cn,$sql);
$nrows = mysqli_num_rows($qry);
if ($nrows > 0) 
    while ($rows = mysqli_fetch_array($qry)) 
        $id = $rows['userid'];
        $fn = $rows['fullname'];
?>
        <tr>
            <td><?php echo $id; ?></td>
            <td><?php echo $fn; ?></td>
            <td><a href = "#edit<?php echo $id; ?>" data-toggle = "modal" class = "btn btn-success btn-sm">Edit</a></td>
        </tr>

        <div class = "modal" id = "edit<?php echo $id; ?>">
            <div class = "modal-dialog">
                <div class = "modal-content">
                    <div class = "modal-header">
                        <h5 class = "modal-title">Edit Information</h5>
                        <button class = "close" data-dismiss = "modal">&times;</button>
                    </div>
                    <div class = "modal-body">
                        <input type = "text" id = "user_id" value = "<?php echo $id; ?>" class = "form-control" />
                        <input type = "text" id = "full_name" value = "<?php echo $fn; ?>" class = "form-control" />
                    </div>
                    <div class = "modal-footer">
                        <button class = "btn btn-primary btn-sm" id = "update<?php echo $id; ?>">Update</button>
                        <button class = "btn btn-danger btn-sm" data-dismiss = "modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $("#update<?php echo $id; ?>").click(function() 
                var id = $("#user_id").val();
                var fn = $("#full_name").val();
                if (confirm("Are you sure you want update this record?")) 
                    $.ajax(
                        url: "edit_account_process.php",
                        type: "POST",
                        data: 
                            userid: id,
                            fullname: fn
                        ,
                        success: function(data) 
                            $("#showData").html(data);
                        
                    );
                
            );
        </script>                       
 <?php      

    

 ?>

第二个php页面（edit_account_process.php）：（此页面将用于更新记录）

<?php
$cn = mysqli_connect("localhost","root","","testdb");
$id = $_POST['userid'];
$fn = $_POST['fullname'];

//for Testing
echo $id . " " . $fn;

$sql = "UPDATE tblinfo SET fullname = '$fn' WHERE userid = '$id' ";
$result = mysqli_query($cn,$sql);

if ($result) 
    echo "<script>alert('Successfully updated!');</script>";

else 
    echo "<script>alert('Unable to update the record!');</script>";

?>

我的代码现在发生的情况是，即使我尝试选择其他记录，它也总是选择我数据库中的第一条记录。这是

如何定位将要更新的特定 ID？

提前谢谢你

【问题讨论】：

发布您的更新查询

@sid 我已经发布了更新查询

你的表中的主键列名是什么？

@sid，主键是“userid”

【参考方案1】：

您不需要定义多个模式，使用多个脚本 - 正如您现在所做的那样（在循环内，您创建一个新模式和一个新脚本）。

相反，添加您动态分配值的 one 模态，并使用 one 脚本来监听按钮的点击。该点击会从data-* 属性中获取您需要的值，并将它们放入您模式中输入字段的值中。

<?php
$cn = mysqli_connect("localhost","root","","testdb");
$sql = "SELECT * FROM tblinfo";
$qry = mysqli_query($cn,$sql);
$nrows = mysqli_num_rows($qry);
if ($nrows > 0) 
    while ($rows = mysqli_fetch_array($qry)) 
        $id = $rows['userid'];
        $fn = $rows['fullname'];
        ?>
        <tr>
            <td><?php echo $id; ?></td>
            <td><?php echo $fn; ?></td>
            <td><a href="#" class="btn btn-success btn-sm toggleEditModal" data-uid="<?php echo $id; ?>" data-fullname="<?php echo $fn; ?>">Edit</a></td>
        </tr>                  
        <?php      
    

?>

<script>
    $(".toggleEditModal").on("click", function(e) 
        e.preventDefault();
        $('#user_id').val($(this).data('uid'));
        $('#full_name').val($(this).data('fullname'));
        $("#editModal").modal('show');
    );

    $("#updateUser").click(function() 
        var id = $("#user_id").val();
        var fn = $("#full_name").val();
        if (confirm("Are you sure you want update this record?")) 
            $.ajax(
                url: "edit_account_process.php",
                type: "POST",
                data: 
                    userid: id,
                    fullname: fn
                ,
                success: function(data) 
                    $("#showData").html(data);
                    $("#editModal").modal('hide');
                
            );
        
    );
</script>     

<div class = "modal" id = "editModal">
    <div class = "modal-dialog">
        <div class = "modal-content">
            <div class = "modal-header">
                <h5 class = "modal-title">Edit Information</h5>
                <button class = "close" data-dismiss = "modal">&times;</button>
            </div>
            <div class = "modal-body">
                <input type = "text" id = "user_id" value = "" class = "form-control" />
                <input type = "text" id = "full_name" value = "" class = "form-control" />
            </div>
            <div class = "modal-footer">
                <button class = "btn btn-primary btn-sm" id = "updateUser">Update</button>
                <button class = "btn btn-danger btn-sm" data-dismiss = "modal">Close</button>
            </div>
        </div>
    </div>
</div>

【讨论】：

您好，感谢您的回复，我在上面尝试了您的代码，但是当我单击“编辑”按钮时没有显示模式？

您使用了上面的所有代码，还是只使用了其中的一部分？如果您已包含 Boostrap javascript，$("#editModal").modal('show'); 应该会触发模式。

是的，我使用了上面您专门发布的整个代码：$("#editModal").modal('show');和 Bootstrap Javascript 也包含在我的页面中

嗨，它现在可以工作了 :) 我刚刚编辑了你上面的代码，这些部分： $('#user_id').val($(this).data('uid')): $(' #full_name').val($(this).data('fullname')): 我把 : (冒号) 改成了 ; （分号）

再次谢谢你 :) 再问一个问题，如果我的数据库中还有几个字段，我会在里面添加另一个 data-xxx= ""这个标签 ?