如何使用 ajax 和 php 制作编辑模式

Question

在实现可以编辑用户角色的编​​辑功能时遇到问题

这是打开模式的按钮

<button type="button" id="edit" name="edit" class="btn btn-outline-warning" data-id="'.$row["id"].'">EDIT</button>

这是模态代码

<div class="modal fade" id="editModal" 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">Edit User</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" action="">
          <div class="form-group">
            <label for="userName" class="col-form-label">Username:</label>
            <input type="text" class="form-control border-danger" id="userName" readonly style="background-color: #2A3038">
          </div>
          <div class="form-group">
            <label for="user_type" class="col-form-label">User Type:</label>
            <select class="form-control border-success" id="user_type">
            <option value="user">User</option>
            <option value="contributor">Contributor</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
      <input type="hidden" id="user_id" name="user_id">
        <button type="submit" id="update" name="update" class="btn btn-success">Update</button>
        <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

阿贾克斯

$(document).on('click', '#edit', function(){
var user_id = $(this).attr("data-id");
$.ajax({
    url:"/auth/action",
    method:"POST",
    data:{user_id:user_id},
    dataType:"json",
    success:function(data)
    {
        $('#editModal').modal('show');
        $('#userName').val(data.userName);
        $('#user_type').val(data.user_type);
        $('#user_id').val(user_id);
    }
})
  });

动作发生的PHP

if($_POST["action"] == 'update')
{
    $query = 'UPDATE `users` SET username = :username, user_type = :user_type WHERE id = :id';
    $statement = $connect->prepare($query);
    $statement->execute(
        array(
            ':id'              => $_POST['user_id'],
            ':username'              => $_POST['userName'],
            ':user_type'              => $_POST['user_type']
        )
    );
    $result = $statement->fetchAll();
    if(isset($result))
    {
        echo '<div class="alert alert-fill-warning" role="alert">User type changed!<div>';
    }
}

我还有一个 fetch 函数，我将其命名为 load_user_data()

这里是数据类型 json

    if(isset($_POST["user_id"]))
{
    $output = array();
    $statement = $connect->prepare(
        "SELECT * FROM users WHERE id = '".$_POST["user_id"]."' LIMIT 1"
    );
    $statement->execute();
    $result = $statement->fetchAll();
    foreach($result as $row)
    {
        $output["userName"] = $row["username"];
        $output["user_type"] = $row["user_type"];
    }
    echo json_encode($output);
}

我遇到的问题是 PHP 操作代码不起作用或者我的代码有什么问题？但我没有在模式中显示数据的问题，除非我提交更改，否则不会发生任何功能

Answer 1

您的 ajax 数据属性缺少很多参数：

 ....ajax....
 data: {user_id: user_id, userName: username here,user_type:set type here, action: 'update'}

您需要在更新按钮中添加编辑 ID

您还需要将用户数据添加到您的 ajax 响应中，目前您正在使用 data.userName 等，但您没有将其放入响应中

您可以在此处找到有关如何正确返回 json 响应的更多信息： Returning JSON from a PHP Script

Answer 2

<div class="modal fade" id="editModal" 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">Edit User</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="post" action=""> 
          <div class="appenddata">
          </div> 
        </form>
      </div>
      <div class="modal-footer"> 
        <button type="submit" id="update" name="update" class="btn btn-success">Update</button>
        <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script>
$(document).on('click', '#edit', function(){
$('#editModal').modal('show');
var user_id = $(this).attr("data-id");
$.ajax({
    url:"/auth/action",
    method:"POST",
    data:{user_id:user_id},
    success:function(data)
    {
        $(".appenddata)".html(data);
    }
})
});
</script>
<?php
   if(isset($_POST["user_id"]))
{
    $output = array();
    $statement = $connect->prepare(
        "SELECT * FROM users WHERE id = '".$_POST["user_id"]."' LIMIT 1"
    );
    $statement->execute();
    $result = $statement->fetchAll();
    $user_array=array("user","contributor");
    ?>
    <input type="hidden" id="user_id" name="user_id" value="<?= $_POST["user_id"]; ?>">
      <div class="form-group">
            <label for="userName" class="col-form-label">Username:</label>
            <input type="text" class="form-control border-danger" id="userName" value="<?=  $result[0]['username']; ?>" readonly style="background-color: #2A3038">
          </div>
          <div class="form-group">
            <label for="user_type" class="col-form-label">User Type:</label>
            <select class="form-control border-success" id="user_type">
            <?php
             if($user_array!=NULL)
             {
                 foreach($user_array as $data)
                 {
                     if($data==$result[0]['username'])
                     {
                         $selected='selected="selected"';
                     }
                     else
                     {
                         $selected='';
                     }
                     ?>
                      <option value="<?= $data; ?>"><?= ucwords($data); ?></option>
                     <?php
                 }
             }
             ?> 
            </select>
          </div>
    <?php
}