PHP实现提交表单后保持模态框不关闭的方法咨询

传统表单提交会触发页面跳转，要留在模态框内，核心是用AJAX异步提交替代默认表单提交逻辑，以下是具体实现步骤：

1. 修改generateBarcode.php的表单代码 #

移除表单的action属性，添加ID用于JS绑定事件，同时把原URL中的id参数转为隐藏域传递：

<form id="barcodeForm" method="post">
  <!-- 保留原表单的其他输入元素，比如serialnumber输入框 -->
  <input type="hidden" name="id" value="<?php echo $d1; ?>">
  <button type="submit">提交</button>
</form>

2. 添加AJAX提交的JavaScript代码 #

在generateBarcode.php页面的模态框区域或页面末尾加入以下代码，阻止默认跳转并异步提交数据：

document.getElementById('barcodeForm').addEventListener('submit', function(e) {
  // 阻止表单默认跳转行为
  e.preventDefault();
  
  // 收集表单所有数据
  const formData = new FormData(this);
  
  // 发起异步请求
  fetch('savegenarateBarcode.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(result => {
    // 提交成功后的自定义处理：比如提示用户、清空表单、刷新模态框内容
    if (result.status === 'success') {
      alert('提交成功');
      // 示例：清空serialnumber输入框
      document.querySelector('input[name="serialnumber"]').value = '';
    } else {
      alert('提交失败：' + result.message);
    }
  })
  .catch(error => {
    console.error('请求出错:', error);
    alert('提交失败，请重试');
  });
});

3. 调整savegenarateBarcode.php的处理逻辑 #

处理完成后无需跳转，直接返回JSON格式的处理结果，同时修复原代码的SQL注入风险：

<?php
session_start();
include('../connect.php');

try {
    $d1 = $_POST['id'];
    $b = $_POST['serialnumber'];
    
    // 使用预处理语句绑定参数，避免SQL注入
    $sqlm = "SELECT * FROM product_item WHERE serialnumber=?";
    $query = $db->prepare($sqlm);
    $query->execute([$b]);
    $user_array = $query->fetchAll(PDO::FETCH_ASSOC);
    
    // 返回成功结果
    echo json_encode(['status' => 'success', 'data' => $user_array]);
} catch (PDOException $e) {
    // 返回错误信息
    echo json_encode(['status' => 'error', 'message' => $e->getMessage()]);
}
?>

补充说明 #

• 若使用Bootstrap等框架的模态框，提交后模态框会默认保持显示状态，无需额外处理；若需手动控制，可调用框架的模态框方法。
• 可根据业务需求，在AJAX回调中更新模态框内的动态内容，比如刷新条码预览区域。

内容的提问来源于stack exchange，提问作者Nadula