首页 > 解决方案 > 如何使用 ajax 和 php 制作编辑模式

问题描述

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

这是将打开模式的按钮

<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 操作代码不起作用或者我的代码有什么问题?但我没有在模式中显示数据的问题,除非我提交更改,否则不会发生任何功能

标签: phphtmlajax

解决方案


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

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

您需要将编辑 ID 添加到更新按钮

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

您可以在此处找到有关如何正确返回 json 响应的更多信息: 从 PHP 脚本返回 JSON


推荐阅读