php实现bootstrap modal的crud

---

通过js实现modal:

对应的是modal的id.

$('#updateModal').modal("show");
$('#updateModal').modal("hide");

在点击update按钮的时候要传递updateid到js文件。然后从js文件里面通过ajax传递updateid的data到php,这样php的response里面就有updateid.

function getDetails(updateid) {

      $('#hiddendata').val(updateid);
      $.post('update.php',{updateid:updateid},(data,status) => {
        var userId = JSON.parse(data);
        $('#updateName').val(userId.name);
        $('#updateEmail').val(userId.email);
        $('#updateMobile').val(userId.mobile);
        $('#updatePlace').val(userId.place);

        console.log(data);
      });
      $('#updateModal').modal("show");

    }

ajax发送到php文件的rensponse来自于php文件，要通过

echo json_encode($response); 来解析出来

if (isset($_POST['updateid'])) {
  $updateid = $_POST['updateid'];
  $sql = "SELECT * FROM `crud` WHERE id = $updateid";
  $result = mysqli_query($con,$sql);
  //要获取 use mysqli_fetch_assoc($result) 不能直接var_dump($result)
  
  $response = array();
  while($row=mysqli_fetch_assoc($result)) {
    $response=$row;
  }
//convert php object to json format
 echo json_encode($response);
  // code...
} else {
  $response['status'] = 200;
  $response['message'] = 'Invalid or data not found';
}

// update function ajax
    function updateDetails() {
      var updatename = $('#updateName').val();
      var updateemail = $('#updateEmail').val();
      var updatemobile = $('#updateMobile').val();
      var updateplace = $('#updatePlace').val();
      var hiddendata = $('#hiddendata').val();

      $.post("update.php",{
        updatename:updatename,
        updateemail:updateemail,
        updatemobile:updatemobile,
        updateplace:updateplace,
        hiddendata:hiddendata

      },(data,success) => {
        $('#updateModal').modal("hide");
        displayData();
      });

if(isset($_POST['hiddendata'])) {
  $uniqueid = $_POST['hiddendata'];
  $name = $_POST['updatename'];
  $email = $_POST['updateemail'];
  $mobile = $_POST['updatemobile'];
  $place = $_POST['updateplace'];

  $sql = "UPDATE `crud` SET name='$name',email='$email',mobile='$mobile',place='$place' WHERE id=$uniqueid ";
  $result=mysqli_query($con,$sql);

}

display函数：

if (isset($_POST['displaySend'])) {
  $table = '<table class="table">
  <thead class="table-dark">
    <tr>
      <th scope="col">Sl no</th>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
      <th scope="col">Mobile</th>
      <th scope="col">Place</th>
      <th scope="col">Operations</th>
    </tr>
  </thead>';
  $sql = "SELECT * FROM `crud`";
  $result = mysqli_query($con,$sql);
  $i = 1;
  while($row=mysqli_fetch_assoc($result)) {
    $id=$row['id'];
    $name=$row['name'];
    $email=$row['email'];
    $mobile=$row['mobile'];
    $place=$row['place'];
    $table .= '<tr>
      <td scope="row">'.$i.'</td>
      <td>'.$name.'</td>
      <td>'.$email.'</td>
      <td>'.$mobile.'</td>
      <td>'.$place.'</td>
      <td>
        <button class="btn btn-dark" onclick="getDetails('.$id.')">Update</button>
        <button class="btn btn-danger" onclick="deleteUser('.$id.')">Delete</button>
      </td>
    </tr>
    <tr>';
    $i++;


  }
  $table .= '</table>';
    echo $table;
}

display前端：

function displayData() {
      var displayData = "true";
      $.ajax({
        url:"display.php",
        type:'post',
        data:{
          displaySend:displayData
        },
        success:(data,status) => {
          $('#displayDataTable').html(data);

        },
        error:(error) => {
          $('#displayDataTable').html(error);
        }

      });
    }

display使用

 jQuery(document).ready(($) => {
      displayData();
    })

---