jQuery、AJAX结合PHP填充HTML表格时内容显示为undefined的问题

你遇到的问题是四层代码配置不匹配、书写错误叠加导致的，逐一对标修正即可：

• 键名大小写不匹配：PHP返回的JSON键为大写开头的Name、Amount，但前端JS取值时用了小写的name、amount，属性不存在自然返回undefined。
• AJAX配置错位：dataType: 'json'是$.ajax的独立配置项（作用是让jQuery自动把返回的JSON字符串解析为可操作的JS对象），你却把它塞到了要提交给后端的data参数里，配置完全不生效，还会向后端传一个无意义的dataType参数。
• PHP变量大小写错误：你定义了小写的$amount存数据库取出的金额值，组装返回数组时却用了大写的$Amount，这是未定义变量，实际存到返回值里的金额是空值。
• 返回格式校验缺失：前端按数组格式循环遍历response[i]取值，如果后端返回的是单个对象而非数组，会直接导致遍历异常、取值失败。

修正后可正常运行的代码 #

前端jQuery/AJAX部分 #

var integer = $("#transfers_in").attr("name");
$.ajax('includes/test.php', {
  type: 'POST',
  // 独立配置dataType，不要混入提交参数
  dataType: 'json',
  data: {
    myData: integer
  },
  success: function(response) {
    // 先校验返回值是否为有效数组，避免空数据/格式错误导致的异常
    if (!Array.isArray(response) || response.length === 0) return;
    let trContent = '';
    for (var i = 0; i < response.length; i++) {
      // 取值的键名和PHP返回的完全对齐
      var name = response[i].Name;
      var amount = response[i].Amount;
      trContent += "<tr>" +
        "<td align='center'>" + (i + 1) + "</td>" +
        "<td align='center'>" + name + "</td>" +
        "<td align='center'>" + amount + "</td>" +
        "</tr>";
    }
    // 拼完全部行再一次性插入，减少DOM操作次数
    $("#money_in").append(trContent);
  }
});

后端PHP处理部分 #

<?php
if (isset($_POST['myData'])) {
    $integer = $_POST['myData'];
    if ($integer === "1"){
        include 'db_connection.php';
        $conn = new mysqli($servername, $username, $password, $dbname);
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }
        $return_arr = array();
        $query = "SELECT * FROM `money_in_19_20`";
        $result = mysqli_query($conn,$query);
        while($row = mysqli_fetch_assoc($result)){
            $name = $row['Name'];
            // 变量名和后续组装数组时的引用保持大小写一致
            $amount = $row['Amount'];
            $return_arr[] = array(
                "Name" => $name,
                "Amount" => $amount
            );
        }
        // 显式声明返回的内容类型为JSON，避免浏览器解析异常
        header('Content-Type: application/json');
        echo json_encode($return_arr);
        // 输出后直接终止脚本，避免多余输出破坏JSON格式
        exit;
    }
}

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