17370845950

本文介绍如何将为每行商品单独发起 ajax 请求的冗余写法，重构为仅用一个通用事件监听 + 动态 id 绑定的优雅方案，大幅提升代码可维护性与性能。

在实际开发中，当表单包含大量动态行（如 50+ 行商品录入），若为每一行（如 productCode_1、productCode_2…productCode_50）单独绑定 change 事件并调用独立的 AJAX 函数（如 getDataFromServer1()、getDataFromServer2()），不仅代码重复度高、难以维护，还极易因遗漏或命名错误导致功能异常。

核心优化思路：统一事件委托 + 动态上下文识别

我们不再为每个输入框写独立事件，而是利用 事件委托（Event Delegation），为所有商品编码输入框统一添加 .product-code 类，并通过 data-id 属性标记其所属行号。JavaScript 通过 $(this).attr('data-id') 动态获取当前操作的行索引，再精准填充对应行的其他字段。

✅ 优化后的 HTML 关键改动：

✅ 对应的 JavaScript 重构（使用 jQuery 事件委托）：

jQuery(document).on('change', '.product-code', function() {
    const $this = $(this);
    const PID = $this.val().trim();
    const itemId = $this.data('id'); // 安全获取整数行号

    if (!PID) return; // 空值不触发请求

    getDataFromServer(PID, itemId);

    // 自动聚焦下一行（防越界）
    const nextId = itemId + 1;
    if (nextId <= 50) {
        $('#productCode_' + nextId).focus();
    }
});

function getDataFromServer(PID, itemId) {
    $.ajax({
        type: "POST",
        url: "response.php",
        data: { pro_id: PID },
        dataType: "json", // 推荐显式声明，避免手动 parse
        success: function(response) {
            // 假设 response 是标准 JSON 对象（无需 JSON.parse）
            $(`#productName_${itemId}`).val(response.pro_name || '');
            $(`#productOnHand_${itemId}`).val(response.pro_quantity || 0);
            $(`#price_${itemId}`).val(response.pro_price || 0);
            $(`#quantity_${itemId}`).val(1); // 默认数量设为 1
        },
        error: function(xhr, status, error) {
            console.warn(`第 ${itemId} 行加载失败：`, error);
            alert(`无法加载商品信息，请检查编码是否正确。`);
        }
    });
}

? 关键优势说明：

• ✅ 零重复代码：1 个事件监听 + 1 个 AJAX 函数，支撑全部 50 行；
• ✅ 可扩展性强：新增行数只需调整 PHP 循环上限和前端判断逻辑，无需修改 JS；
• ✅ 健壮性提升：加入空值校验、越界防护、AJAX 错误处理；
• ✅ 语义清晰：data-id 比硬编码 ID 更易读、更安全，避免 DOM 查询歧义。

⚠️ 注意事项：

• 后端 response.php 必须返回标准 JSON（header('Content-Type: application/json'); + json_encode($data)），确保前端 dataType: "json" 正常解析；
• 若需支持“回退编辑”（如修改第 3 行后重新聚焦第 2 行），可补充键盘方向键监听逻辑；
• 生产环境建议对 pro_id 做 XSS 过滤与 SQL 防注入（PHP 端使用预处理语句）。

通过这一重构，你将告别“复制粘贴式 AJAX”，迈出迈向模块化、可维护前端代码的关键一步。