实现高效的表单数组数据校验：PHP与JavaScript/Ajax协同验证策略

<?php // validate_materials.php  // 确保数据库连接 $conn 已经建立 // include 'db_connection.php'; // 示例：包含数据库连接文件  // 设置响应头为JSON，告知客户端返回的是JSON数据 header('Content-Type: application/json');  // 检查是否是POST请求，并且包含预期的按钮动作 if(isset($_POST['btn_action'])){     $material_id = $_POST['material_added_id'];     $material_issued = $_POST['material_isseud_weight'];     // 可以根据需要获取其他相关数据，如 $unit_type, $product_id, $ricip_name 等      // 初始化一个默认的成功响应     $response = ['status' => 'success', 'message' => '所有物料都在库存中。'];      // 遍历物料数组进行校验     for($count = 0; $count < count($material_id); $count++) {         // 使用预处理语句防止SQL注入         $qry = "SELECT material_weight, material_added_name FROM material_added_tb WHERE material_added_id = :material_id";         $statement = $conn->prepare($qry);         // 绑定参数，确保数据类型正确         $statement->bindParam(':material_id', $material_id[$count], PDO::PARAM_INT);         $statement->execute();         $result = $statement->fetch(PDO::FETCH_ASSOC); // 使用 fetch() 获取单行结果          // 检查是否找到了物料         if ($result) {             $material_weight = $result['material_weight'];             $material_name = $result['material_added_name'];              // 比较用户输入的数量与库存量             if($material_issued[$count] > $material_weight) {                 // 如果发现库存不足，立即设置错误响应                 $response = [                     'status' => 'error',                     'message' => $material_name . " 库存不足，请调整数量。"                 ];                 echo json_encode($response); // 输出JSON响应                 exit(); // 立即终止脚本执行，不再处理后续物料             }         } else {             // 如果物料ID不存在，也视为错误             $response = [                 'status' => 'error',                 'message' => "物料ID " . htmlspecialchars($material_id[$count]) . " 未找到。"             ];             echo json_encode($response);             exit();         }     }      // 如果循环完成，表示所有物料都通过了校验，返回成功响应     echo json_encode($response);  } else {     // 如果不是有效的请求（例如，直接访问此PHP文件）     $response = ['status' => 'error', 'message' => '无效的请求。'];     echo json_encode($response); } ?>

// 假设这是在你的HTML页面中的JavaScript代码，或者一个外部的 .js 文件 document.addEventListener('DOMContentLoaded', function() {     // 获取你的表单元素，这里假设表单有一个ID，例如 'myForm'     const form = document.getElementById('myForm');       if (form) { // 确保表单元素存在         form.addEventListener('submit', function(event) {             event.preventDefault(); // 阻止表单的默认提交行为              // 使用 FormData 对象收集表单中的所有数据，包括数组数据             const formData = new FormData(form);              // 发送 Ajax 请求到 PHP 校验脚本             fetch('validate_materials.php', { // 替换为你的PHP校验脚本的实际URL                 method: 'POST', // 使用 POST 方法发送数据                 body: formData // FormData 对象会自动设置正确的 Content-Type             })             .then(response => {                 // 检查HTTP响应状态码                 if (!response.ok) {                     throw new Error(`HTTP error! status: ${response.status}`);                 }                 return response.json(); // 解析服务器返回的 JSON 响应             })             .then(data => {                 // 根据服务器返回的 JSON 数据进行处理                 if (data.status === 'error') {                     alert(data.message); // 显示服务器返回的错误信息                     // 此时表单不会被提交，因为我们在开头阻止了默认行为                 } else {                     // data.status === 'success'，表示所有校验都通过                     alert(data.message); // 例如：显示“所有物料都在库存中。”                     // 如果所有校验通过，现在可以手动提交表单                     // 或者执行其他成功后的操作，例如通过Ajax提交整个表单数据                      // 方式一：如果希望传统方式提交表单                     form.submit();                       // 方式二：如果希望通过Ajax提交整个表单（更现代的单页应用风格）                     // submitFullFormViaAjax(formData); // 调用一个函数来处理完整表单提交                 }             })             .catch(error => {                 console.error('校验过程中发生错误:', error);                 alert('校验过程中发生错误，请稍后再试。');             });         });     } });  // 示例：如果整个表单也通过Ajax提交，你可以定义这样一个函数 /* function submitFullFormViaAjax(formData) {     fetch('submit_form_processor.php', { // 替换为你的表单最终提交处理脚本的URL         method: 'POST',         body: formData     })     .then(response => response.json())     .then(data => {         if (data.status === 'success') {             alert('表单提交成功！');             // 可以重定向页面，或者更新UI显示成功信息             // window.location.href = 'success_page.php';         } else {             alert('表单提交失败: ' + data.message);         }     })     .catch(error => {         console.error('表单提交过程中发生错误:', error);         alert('表单提交过程中发生错误，请稍后再试。');     }); } */