打开时尝试将数据从数据库传递到引导模式。我该怎么做？

Question

我正在尝试将数据从我的数据库传递到模态表单中。此模式的目的是让用户可以在数据库中编辑他们的数据，然后保存对所述数据的更改。

我已经在 YouTube 上尝试了许多教程，并使用诸如通过 Ajax 和 Bootstrap Modal Event Listener & Ajax 和 jQuery Click 函数等方法阅读了本网站上以前的回复，但由于我对这些编程语言缺乏经验，我还没有理解为示例与我的项目大不相同。以下是我的表单代码以及数据库中的表

用于打开模态的按钮：

 <a class="badge badge-success p-2" role="button" data-toggle="modal" data-target="#editPostModal">Edit</a>     

模态：

<div class="modal fade" id="editPostModal" tabindex="-1" role="dialog"aria-labelledby="exampleModalLabel" aria-hidden="true">

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

  <div class="modal-content">

    <div class="modal-header">

      <h5 class="modal-title" id="exampleModalLabel">Update Post</h5>

      <button type="button" class="close" data-dismiss="modal" aria-label="Close">

        <span aria-hidden="true">&times;</span>

      </button>

    </div>

    <form action="editdata.inc.php" method="POST" enctype="multipart/form-data"> // PHP File I would like to use to run a possible "update" query

      <div class="modal-body">

        <div class="form-group">

          <input type="text" name="themeContent" class="form-control" placeholder = "Enter theme"/>

        </div>

        <div class="form-group">

          <input type="text" name="visualIdeaContent" class="form-control" placeholder = "Enter idea"/>

        </div>

        <div class="form-group">

          <input type="text" name="captionContent" class="form-control" value="<?= $captionContent; ?>" placeholder = "Insert caption"/>

        </div>

总而言之，我希望模态能够：

1) 打开并显示与特定用户 ID 相关的数据库中的数据

2) 单击“保存更改”按钮时，可以保存对该数据所做的任何更改。

3) 更新数据库中保存的数据。

这是我的 CRUD 应用程序的最后一部分，因为我已经掌握了其他三个功能。感谢我能得到的任何帮助。

Answer 1

您需要 2 个控制器方法：public function respondData($id){&nbsp; &nbsp; //you can ever check if id exist here or if exist at all and&nbsp;&nbsp; &nbsp; //throw any exeptions if not exist, this is just example&nbsp; &nbsp; if($checkUser->exist($id))&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; $userData = array('id' => '1, 'name' => 'Name');&nbsp; &nbsp; &nbsp; &nbsp; return json_encode($data);&nbsp; &nbsp; }&nbsp; &nbsp; throw new \Exeption('User does not exist');}public function saveData(){&nbsp; &nbsp; if($_POST)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp;if(($checkUser->exist($_POST['id'])))&nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //get value from POST and check and update&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return true; // or message and parse it if it was ajax request&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; }&nbsp; &nbsp; throw new \Exeption('Method not allowed');}JQUERY：您需要从您的用户那里获取数据并将其绑定到模态您可以这样做：添加data-user到您的按钮或链接和其他方法来触发模态打开：$(document).on('click', '#your-link', function () {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var data = $(this).data('user');&nbsp; &nbsp; &nbsp; &nbsp; $.post({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: 'url_to_first_action' + '?id=' + data,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: data,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //here you parse JSON ARRAY to your fields&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });现在，在用户将数据提交给第二个操作后，您可以使用直接的 POST 请求或使用 ajax 进行序列化（）发布。

Answer 2

所以在修改了以前的代码之后，我得到了这个工作。我的表：<table class="table table-bordered table-hover">&nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Theme</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Visual Idea</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Caption</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Date</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Visual</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Actions</th>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; $table&nbsp; = mysqli_query($conn ,'SELECT * FROM content');&nbsp; &nbsp; &nbsp; &nbsp; while($row&nbsp; = mysqli_fetch_array($table)){ ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr id="<?php echo $row['uidContent']; ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="200" data-target="themeContent"><?php echo $row['themeContent']; ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="300" data-target="visualIdeaContent"><?php echo $row['visualIdeaContent']; ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="600" data-target="captionContent"><?php echo $row['captionContent']; ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="100" data-target="dateContent"><?php echo $row['dateContent']; ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="200" data-target="visualContent"><img id="imgsrc" src="<?php echo $row['visualContent']; ?>"width="200"/></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style = "display:none" width="100" data-target="linkContent"><?php echo $row['linkContent']; ?></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td width="170">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="badge badge-primary p-2" role="button" href="<?php echo $row['linkContent']; ?>" target="_blank">Link</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="badge badge-success p-2" href="#" data-role="update" data-id="<?php echo $row['uidContent'] ;?>">Edit</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="badge badge-danger p-2" role="button" href="action.inc.php?delete=<?php echo $row['uidContent'] ;?>" onclick="return confirm('Are you sure you want to delete this post? This process cannot be undone.');">Delete</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <?php }&nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; </table>剧本：<script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; //&nbsp; Gets values in input fields&nbsp; $(document).on('click','a[data-role=update]',function(){&nbsp; &nbsp; var id&nbsp; = $(this).data('id');&nbsp; &nbsp; var themeContent = $('#'+id).children('td[data-target=themeContent]').text();&nbsp; &nbsp; var visualIdeaContent = $('#'+id).children('td[data-target=visualIdeaContent]').text();&nbsp; &nbsp; var captionContent = $('#'+id).children('td[data-target=captionContent]').text();&nbsp; &nbsp; var linkContent = $('#'+id).children('td[data-target=linkContent]').text();&nbsp; &nbsp; var dateContent = $('#'+id).children('td[data-target=dateContent]').text();&nbsp; &nbsp; var visualContent = $('#'+id).children('td[data-target=visualContent]').text();&nbsp; &nbsp; $('#themeContent').val(themeContent);&nbsp; &nbsp; $('#visualIdeaContent').val(visualIdeaContent);&nbsp; &nbsp; $('#captionContent').val(captionContent);&nbsp; &nbsp; $('#dateContent').val(dateContent);&nbsp; &nbsp; $('#linkContent').val(linkContent);&nbsp; &nbsp; $('#visualContent').val(visualContent);&nbsp; &nbsp; $('#uidContent').val(id);&nbsp; &nbsp; $('#updatePostModal').modal('toggle');&nbsp; });});</script>唯一的问题是我没有让图像路径在表单中显示为缩略图，但我会通过研究自己弄清楚。我的代码很丑，但在这一点上，我更关心功能。谢谢大家。