如何将JSON响应填充到表格每行的输入字段中

要实现返回的JSON数据填充到当前行的对应输入框，关键是准确定位当前触发ID输入的行，并修正数据存在性判断逻辑，具体修改如下：

修改后的Ajax代码 #

$(".id").change(function(){
  var sid = $(this).val();
  // 存储当前触发事件的输入框元素，避免在success回调中丢失上下文
  var $currentIdInput = $(this);
  
  // 如果ID为空，不发送请求并清空当前行输入框
  if(!sid.trim()){
    $currentIdInput.closest('tr').find('.fname, .num').val('');
    return;
  }

  $.ajax({
    method: "GET",
    url: "getData.php",
    data: {sid: sid},
    dataType: "json",
    success: function(data){
      // 修正判断逻辑：返回的是对象而非数组，检查是否包含有效数据
      if(!data || !data.name || !data.num){
        alert("No data found");
        $currentIdInput.closest('tr').find('.fname, .num').val('');
      } else {
        // 定位当前行并填充数据
        var $currentRow = $currentIdInput.closest('tr');
        $currentRow.find('.fname').val(data.name);
        $currentRow.find('.num').val(data.num);
      }
    },
    error: function(jqXHR, textStatus, errorThrown) {
      // 显示具体错误信息便于调试
      alert("请求出错: " + textStatus + " - " + errorThrown);
      $currentIdInput.closest('tr').find('.fname, .num').val('');
    }
  });
});

核心逻辑说明 #

1. 上下文保存：在change事件触发时存储当前输入框元素，避免Ajax回调中this指向丢失。
2. 精准定位行：通过closest('tr')锁定当前输入框所在的表格行，再用find()定位该行内的目标输入框，确保只修改当前行数据。
3. 修正数据判断：返回的是JSON对象而非数组，原data.length == 0判断无效，改为检查对象是否包含有效字段。

代码改进建议 #

1. 修复HTML结构问题：原代码<form>直接包含<tr>不符合规范，需包裹在<table>内：

<form class="" action="" method="POST">
  <table>
    <?php
      $count = $_GET["countID"]; // 改用$_GET匹配Ajax请求方法
      for($i=1; $i<=$count; $i++){
    ?>
    <tr>
      <td><input type="number" name="id[]" class="id"></td>
      <td><input type="text" name="fname[]" class="fname"></td>
      <td><input type="number" name="num[]" class="num"></td>
    </tr>
    <?php } ?>
  </table>
</form>

2. 事件委托适配动态行：如果后续会动态添加表格行，改用事件委托确保绑定有效：

$('form table').on('change', '.id', function(){
  // 内部逻辑与之前一致
});

3. 增强输入验证：添加ID有效性校验，避免无效请求：

if(!sid.trim() || isNaN(parseInt(sid))){
  alert("请输入有效的数字ID");
  $currentIdInput.closest('tr').find('.fname, .num').val('');
  return;
}

4. PHP端安全优化：getData.php查询数据库时使用参数化查询防止SQL注入：

// 示例PDO参数化查询
$sid = $_GET['sid'];
$stmt = $pdo->prepare("SELECT name, num FROM students WHERE id = ?");
$stmt->execute([$sid]);
$data = $stmt->fetch(PDO::FETCH_ASSOC);
echo json_encode($data);

5. 错误处理优化：将错误信息输出到控制台辅助调试：

error: function(jqXHR, textStatus, errorThrown) {
  console.error("请求失败:", textStatus, errorThrown);
  alert("数据加载失败，请稍后重试");
}

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