如何通过AJAX实现药品明细增删操作无需重新加载PHP应用页面

核心实现逻辑 #

通过AJAX异步发送增删请求到后端接口，后端处理完成后返回操作状态，前端直接更新页面DOM元素，无需重新加载整个页面。 #

步骤1：修改services.php页面结构 #

首先调整原有表单、表格的属性，方便JS操作：

<?php
// 原有生成id的代码保持不变
$data = mysqli_query($conn, "SELECT MAX(id_service) AS ids FROM tbl_services");
$final_data = mysqli_fetch_array($data);
$id1 = $final_data['ids'];
$id2 = substr($id1,3,3);  //MR for Medical Record
$id3 = $id2 + 1;
$id4 = 'MR'.sprintf('%03s' , $id3);  
?>

<!-- 给表单加id，移除默认提交属性，按钮改为普通按钮 -->
<form id="medicineForm"> 
<input type="hidden" name="id_medical_record" id="id_medical_record" value="<?php echo $id4 ?>">
<select  name="medicineName" id="medicineName" required>
    <option value="">- 请选择药品 -</option>
    <?php  
    $medicines = mysqli_query($conn, "SELECT * FROM tbl_medicines ORDER BY id_medicines ASC");
    while($m = mysqli_fetch_array($medicines)){ ?>
        <option value="<?php echo $m['id_medicine'] ?>">
             <?php echo $m['medicine_name'] ?>
        </option>
    <?php } ?>
 </select>
 <input type="text" name="qty_medicines" id="qty_medicines" value="1" required />
 <button type="button" id="addBtn" name="add" style="cursor: pointer">新增</button>
</form>

<!-- 给表格加id，tbody单独加id方便动态渲染 -->
<table id="medicineTable">
  <tbody id="medicineTbody">
  <?php  
  $show_details = mysqli_query($conn, "SELECT * FROM tbl_detail_medicines LEFT JOIN tbl_medicines USING (id_medicine)");
  $num = 1;
  if(mysqli_num_rows($show_details) > 0):
  while ($detail = mysqli_fetch_array($show_details)):
  ?>
  <tr data-id="<?php echo $detail['id'] ?>">
      <td><?php echo $num++.'.'; ?></td>
      <td><?php echo $detail['medicine_name'] ?></td>
      <td><?php echo $detail['qty'] ?></td>
      <td>
          <!-- 移除跳转链接，改为自定义属性存储明细id -->
          <a href="javascript:void(0)" class="deleteBtn" data-id="<?php echo $detail['id'] ?>">
              <b> X </b>
          </a>
      </td>
  </tr>
  <?php endwhile; endif; ?>
  </tbody>
</table>

<!-- 引入jQuery（也可替换为本地引入的jQuery文件，或者用原生JS实现） -->
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script>
// 新增药品提交逻辑
$("#addBtn").click(function(){
    let formData = {
        add: 1,
        id_medical_record: $("#id_medical_record").val(),
        medicineName: $("#medicineName").val(),
        qty_medicines: $("#qty_medicines").val()
    };
    $.post("insertDetailMedicines.php", formData, function(res){
        if(res.code == 200){
            // 添加成功后刷新列表
            loadMedicineList();
            // 重置表单
            $("#medicineForm")[0].reset();
        }else{
            alert(res.msg);
        }
    },"json");
});

// 删除药品逻辑
$(document).on("click", ".deleteBtn", function(){
    let delId = $(this).data("id");
    if(confirm("确认删除该药品吗？")){
        $.get("deleteDetail.php", {delete: delId}, function(res){
            if(res.code == 200){
                loadMedicineList();
            }else{
                alert(res.msg);
            }
        },"json");
    }
});

// 加载最新药品列表
function loadMedicineList(){
    $.get("getMedicineList.php", function(html){
        $("#medicineTbody").html(html);
    });
}
</script>

这里新增了loadMedicineList函数拉取最新的药品列表，需要新建一个getMedicineList.php文件输出列表HTML，代码如下：

<?php
require 'koneksi.php';
$show_details = mysqli_query($conn, "SELECT * FROM tbl_detail_medicines LEFT JOIN tbl_medicines USING (id_medicine)");
$num = 1;
$html = '';
if(mysqli_num_rows($show_details) > 0):
while ($detail = mysqli_fetch_array($show_details)):
$html .= '<tr data-id="'.$detail['id'].'">
    <td>'.$num++.'.'.'</td>
    <td>'.$detail['medicine_name'].'</td>
    <td>'.$detail['qty'].'</td>
    <td>
        <a href="javascript:void(0)" class="deleteBtn" data-id="'.$detail['id'].'">
            <b> X </b>
        </a>
    </td>
</tr>';
endwhile;
endif;
echo $html;
?>

步骤2：修改insertDetailMedicines.php适配AJAX #

<?php
require 'koneksi.php';
header("Content-type:application/json");
if (isset($_POST['add'])) { 
    $idMR = $_POST['id_medical_record'];
    $medicineName = $_POST['medicineName'];
    $qty_medicines = $_POST['qty_medicines'];
    $insert_detail = "insert into tbl_detail_medicines (id,id_service,id_medicine,qty) 
                      VALUES
                      (null,'$idMR','$medicineName','$qty_medicines')";
    if (mysqli_query($conn,$insert_detail)) {
        echo json_encode(['code'=>200,'msg'=>'添加成功']);
    }else{
        echo json_encode(['code'=>500,'msg'=>'添加失败：'.mysqli_error($conn)]);
    }
    exit;
}
?>

步骤3：修改deleteDetail.php适配AJAX #

<?php 
require 'koneksi.php';
header("Content-type:application/json");
if(isset($_GET['delete'])){
    $delId = $_GET['delete'];
    $delete = mysqli_query($conn, "DELETE FROM tbl_detail_medicines WHERE id = '".$delId."' ");
    if($delete){
        echo json_encode(['code'=>200,'msg'=>'删除成功']);
    }else{
        echo json_encode(['code'=>500,'msg'=>'删除失败：'.mysqli_error($conn)]);
    }
    exit;
} 
?>

安全提示 #

现有代码未做SQL注入防护，上线前请将所有数据库操作改为mysqli预处理语句，或者切换为PDO操作数据库，避免用户输入恶意内容攻击数据库 #

内容的提问来源于stack exchange，提问作者There's a way