使用php在bootstrap模式对话框中使用编辑表单

所以基本上我有一张员工基本信息表.它已经具有从 mysql数据库中检索的值. employee basic information table.正如您在桌面上看到的那样,它右上角有一个编辑按钮.单击后,将显示模态对话框. edit basic information modal.

我的问题是,一旦用户填写了编辑表单上的字段并单击了保存按钮,我就不知道如何更新基本信息表上的记录.

我想要发生的是当用户点击模态对话框上的保存按钮时,它会自动将表上的现有数据更改为更新的数据,无需重新加载页面.

这意味着,它需要一个ajax或jquery来更新网页的各个部分 – 无需重新加载整个页面,我不知道它是如何工作的.

这是我的表格代码：

<br>
<button type="button" class="btn btn-info btn-sm pull-right" data-toggle="modal" data-target="#myModal1">Edit</button>
<div class="clear text-primary bold"><i class="fa fa-user text-primary"></i> Basic Information    </div> 
<br>
<section class="padder-v">
  <table class="table table-responsive">
    <tbody>   
      <tr>
        <th>
          <strong> Employee ID</strong>
        </th>
        <td>
          <p class="text-muted"><?php echo $_SESSION['emp_code']; ?></p>
        </td>

        <th>
          <strong> Birthdate</strong>
        </th>
        <td>
          <p class="text-muted"><?php echo $_SESSION['birthdate']; ?></p>
        </td> 
      </tr>
      <tr>
        <th>
          <strong> Last Name</strong>
        </th>
        <td>
          <p class="text-muted"><?php echo $_SESSION['lname']; ?></p>
        </td>

        <th>
          <strong> Gender</strong>
        </th>
        <td>
          <p class="text-muted"><?php echo $_SESSION['gender']; ?></p>
        </td>    
      </tr>
      <tr>
        <th>
          <strong> First Name</strong>
        </th>
        <td>
          <p class="text-muted"><?php echo $_SESSION['fname']; ?></p>
        </td>

        <th>
          <strong> Marital Status</strong>
        </th>
        <td>
          <p class="text-muted"><?php echo $_SESSION['status']; ?></p>
        </td>    
      </tr>
      <tr>
        <th>
          <strong>Middle Name</strong>
        </th>
        <td>
          <p class="text-muted"><?php echo $_SESSION['mname']; ?></p>
        </td>
        <th>
          <strong> Active</strong>
        </th>
        <td>
          <p class="text-muted"><?php echo $_SESSION['active']; ?></p>
        </td>    
      </tr>
    </tbody>
  </table>
</section>

php脚本代码：

<?php
if(isset($_POST['submit'])){
    $firstname = $_POST['emp_fname'];
    $middlename = $_POST['emp_mname'];
    $lastname = $_POST['emp_lname'];
    $birthdate = $_POST['emp_bday'];
    $gender = $_POST['emp_gender'];
    $maritalstatus = $_POST['emp_maritalstatus'];

    $query = $mysqli->query("UPDATE tbl_employee SET emp_fname = '$firstname',emp_mname = '$middlename',emp_lname = '$lastname',emp_bday = '$birthdate',emp_gender = '$gender',emp_maritalstatus = '$maritalstatus',WHERE emp_id = '$emp_code'");
    if($query){
?>
<div class="alert alert-success alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Success!</strong> You Added a New Borrower!
</div>
<?php } else{ ?>
<div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Danger!</strong> Something's wrong with the Process! 
</div>
<?php
    }
}
?>

模态代码：

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">  <i class="fa fa-user text-primary"></i> Basic Information</h4>
  </div>     
    <div class="modal-body">         
                <form method="post" >
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="emp_fname">First Name</label>
                                    <input type="text" class="form-control" id="emp_fname" name="emp_fname" value ="<?php echo $_SESSION['fname']; ?>" required>
                                 </div>
                                </div>
                                <div class="col-md-6">
                                <div class="form-group">
                                    <label for="emp_bday">Birthdate </label>
                                    <input type="text" class="form-control" id="emp_bday" name="emp_bday"  value="<?php echo $_SESSION['birthdate']; ?>">
                                </div>
                                </div>
                            <!--- -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="emp_mname">Middle Name </label>
                                        <input type="text" class="form-control" id="emp_mname" name="emp_mname"  value="<?php echo $_SESSION['mname']; ?>">
                                    </div>
                                </div>
                               <div class="col-md-6">
                                  <div class="form-group">
                                    <label for="emp_gender">Gender</label><br>
                                       <select class="form-control" name="emp_gender">
                                          <option>Male</option>
                                          <option>Female</option>
                                       </select>
                                  </div>
                              </div>
                            <!--- -->                            
                                  <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="emp_lname">Last Name </label>
                                            <input type="text" class="form-control" id="emp_lname" name="emp_lname"  value="<?php echo $_SESSION['lname']; ?>">
                                        </div>
                                  </div>
                                  <div class="col-md-6">
                                        <div class="form-group">
                                          <label for="emp_maritalstatus">Marital Status</label><br>
                                             <select class="form-control" name="emp_maritalstatus">
                                                <option>Single</option>
                                                <option>Married</option>
                                                <option>Divorced</option>
                                                <option>Separated</option>
                                                <option>Widowed</option>
                                             </select>
                                        </div>
                                    </div>
                            <!--- -->                               
                         </div>
                         <div class="modal-footer">
                            <button id = "submit" type="submit" class="btn btn-success" name="submit">Save</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                 </form>
           </div>
    </div>
  </div>

<input type="hidden" class="form-control" id="emp_code" name="emp_code" value ="<?php echo $_SESSION['emp_code']; ?>" >

$emp_code = $_POST['emp_code'];

$query = $mysqli->query("UPDATE tbl_employee SET emp_fname = '$firstname',emp_maritalstatus = '$maritalstatus'
                                                WHERE emp_id = '$emp_code'");