动态新增表格行无法运行AJAX自动填充脚本问题求助

问题原因 #

• 重复ID冲突：HTML要求页面内ID唯一，你新增的每一行的输入框都复用了固定IDsappart和namapart，会导致DOM选择逻辑异常。
• 选择器无行限制：autofills函数中直接使用全局选择器$('input[name="id_sap[]"]')、$('input[name="material_name[]"]')，会匹配页面所有同名输入框，取值默认取第一个输入框的值，赋值也会覆盖所有行的对应输入框，无法和当前编辑的行绑定。

修复方案 #

步骤1：修改新增行逻辑 #

移除输入框的重复ID，同时在触发autofills时将当前输入框作为参数传入：

var no = 0;
function addItem() {
    no++;
    var html = "<tr>";
        html += "<td>" + no + "</td>";
        // 移除重复id，传入当前元素到autofills
        html += "<td><input type='text' name='id_sap[]' onkeyup='autofills(this)' required></td>";
        // 移除重复id
        html += "<td><input type='text' name='material_name[]' required></td>";
        html += "<td><input type='number' name='outcoming_qty[]' required /></td>";
        html += "<td><button type='button' onclick='deleteRow(this);'>Delete</button></td>"
    html += "</tr>";
    var row = document.getElementById("tbody").insertRow();
    row.innerHTML = html;
}

function deleteRow(button) {
    button.parentElement.parentElement.remove();
}

步骤2：修改自动填充逻辑 #

通过传入的当前元素定位到所在行，只在当前行内做取值、赋值操作：

function autofills(el){
    // 定位当前编辑的行
    const currentRow = $(el).closest('tr');
    // 取当前行录入的SAP ID
    var parts = $(el).val();
    var sloc = $('input[name="tarea"]').val();
    $.ajax({
        url: 'ajax1.php',
        data: {"id_sap":parts,"storage_location":sloc},
    }).success(function (data) {
        var obj = JSON.parse(data);
        // 仅给当前行的零件名称字段赋值
        currentRow.find('input[name="material_name[]"]').val(obj.material_name ?? '');
    });
}

步骤3：修复PHP接口SQL注入风险 #

原代码直接拼接用户输入的参数到SQL语句，存在严重的SQL注入漏洞，建议改为预处理语句：

<?php
//创建数据库连接
$koneksi = mysqli_connect("localhost", "shaun", "godbless19", "dboptima");

//接收参数
$nomorsap = $_GET['id_sap'];
$areas = $_GET['storage_location'];

//使用预处理语句查询，避免SQL注入
$stmt = mysqli_prepare($koneksi, "SELECT material_name FROM material_card WHERE id_sap = ? AND storage_location = ?");
mysqli_stmt_bind_param($stmt, "ss", $nomorsap, $areas);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
$spare = mysqli_fetch_array($result);

$data = [
    'material_name' => $spare['material_name'] ?? ''
];

echo json_encode($data);
?>

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