如何使用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>而且我还有一个 fetch 函数，我将它命名为 load_user_data()我遇到的问题是 PHP 操作代码不起作用，或者我的代码有什么问题？但我没有在模态中显示数据的问题，除非我提交更改没有功能发生

Answer 1

<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

}

Answer 2

您的 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