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

Answer 2

您的 ajax 数据属性缺少很多参数：&nbsp;....ajax....&nbsp;data: {user_id: user_id, userName: username here,user_type:set type here, action: 'update'}您需要在更新按钮中添加编辑 ID您还需要将 userdata 添加到您的 ajax 响应中，目前您正在使用 data.userName 等，但您没有将其放入响应中您可以在此处找到有关如何正确返回 json 响应的更多信息：&nbsp;从 PHP 脚本返回 JSON