如何为表格每行输入框动态加载 JSON 数据-php教程-PHP中文网

如何为表格每行输入框动态加载 JSON 数据

本文介绍如何通过 ajax 请求根据用户输入的 id 自动填充同一行中的姓名和编号字段，使用 jquery 实现逐行数据绑定，并提供可运行的完整示例与关键注意事项。

本文介绍如何通过 ajax 请求根据用户输入的 id 自动填充同一行中的姓名和编号字段，使用 jquery 实现逐行数据绑定，并提供可运行的完整示例与关键注意事项。

在实际表单开发中，常需实现“输入 ID → 自动回填关联信息”的交互逻辑。例如：一个动态生成的学生成绩录入表，每行含 ID、姓名、编号 三个字段，当用户在某行 ID 输入框中填写学号后，系统应立即通过后端接口获取该学生的姓名与编号，并精准填入当前行对应的输入框中。

要实现这一目标，核心在于两点：

精准定位当前行上下文（避免所有行被同一份数据覆盖）；
正确解析并映射 JSON 响应到对应字段。

以下是一个结构清晰、生产可用的解决方案：

✅ 正确的 DOM 绑定与作用域处理

不要对所有 .id 全局监听 change 事件后盲目赋值，而应利用 jQuery 的事件委托与 DOM 遍历能力，在回调中锁定当前行：

jm-jsjkxyjs02-pzl-803

查询全球任意城市的实时天气和未来天气预报

下载

$(document).on('change', '.id', function() {
  const $row = $(this).closest('tr'); // ✅ 精准获取当前行
  const sid = $(this).val().trim();

  if (!sid) return;

  $.ajax({
    method: 'GET',
    url: 'getData.php',
    data: { sid: sid },
    dataType: 'json',
    success: function(data) {
      if (data && typeof data === 'object' && data.name !== undefined) {
        // ✅ 使用 .find() 在当前行内查找目标输入框
        $row.find('.fname').val(data.name);
        $row.find('.num').val(data.num);
      } else {
        alert('未找到 ID 为 ' + sid + ' 的学生信息');
        $row.find('.fname, .num').val(''); // 清空无效匹配
      }
    },
    error: function() {
      alert('请求失败，请检查网络或服务器状态');
    }
  });
});

? 注意：使用 $(document).on('change', '.id', ...) 替代 $('.id').change(...) 可确保动态添加的行也生效（如通过“添加行”按钮新增）。

✅ 后端响应格式建议（`getData.php`）

返回简洁、明确的扁平对象，而非数组（除非需批量查询）：

<?php header('Content-Type: application/json; charset=utf-8');
$sid = $_GET['sid'] ?? '';

// 示例：从数据库查询（请务必使用 PDO/MySQLi 预处理防止 SQL 注入）
$data = [
  '1001' => ['name' => 'JACKS DONUTS', 'num' => '185'],
  '1002' => ['name' => 'ALICE SMITH',   'num' => '203'],
  '1003' => ['name' => 'BOB JOHNSON',   'num' => '197'],
];

echo json_encode($data[$sid] ?? []);
?>