JSON响应返回undefined且输出HTML问题求助（附JS/PHP代码）

我帮你找出问题所在了！你遇到的data.name为undefined、console.log输出完整HTML的问题，主要有两个核心原因：

1. PHP脚本未终止，导致JSON+HTML混合输出 #

当你通过AJAX传递id参数时，PHP虽然正确赋值了$response变量，但没有立即终止脚本执行，导致后面的表格HTML代码也被一起输出到响应中。这就使得AJAX接收到的不是纯JSON，而是JSON字符串加HTML的混合内容，jQuery无法解析成合法的JSON对象，自然访问data.name会得到undefined。

2. AJAX参数拼写错误 #

你写的datatype:"JSON"是小写的t，而jQuery的AJAX参数要求是驼峰式的dataType（首字母大写T），拼写错误会导致jQuery无法正确识别你期望的响应类型，可能默认按文本处理，进一步加剧解析问题。

修复后的完整代码 #

修改后的PHP代码 #

<?php
include("connect.php");
$response = array();

if(isset($_GET['id'])){
    $id = mysqli_real_escape_string($con, $_GET['id']);
    $q = "select * from student_details where id='$id'";
    $result_students = mysqli_query($con, $q);
    
    // 确保查询到结果后再赋值
    if($row_students = mysqli_fetch_assoc($result_students)){
        $response = $row_students;
    }
    
    // 设置JSON响应头，告诉浏览器这是JSON数据
    header('Content-Type: application/json');
    // 输出JSON字符串
    echo json_encode($response);
    // 关键：终止脚本，避免输出后面的HTML内容
    exit;
} else {
    $q = "select * from student_details";
    $result_students = mysqli_query($con, $q);
    while($row_students = mysqli_fetch_assoc($result_students)){
        $id = $row_students['id'];
        $name = $row_students['name'];
        $des = $row_students['des'];
        $image = $row_students['image'];
?>
<tr>
<td><?php echo $id; ?></td>
<td><?php echo $name; ?></td>
<td><?php echo $des; ?></td>
<td><img width="60" height="60" src="<?php echo $image; ?>"></td>
<td style="width:20%;">
<a href="javascript:void(0)" onclick="deleteStudent(this.id)" id="<?php echo $id; ?>">
<span style="padding-right:10%;" class="glyphicon glyphicon-trash"></span>
</a>
<a href="javascript:void(0)" onclick="updateStudentShow(this.id)" id="<?php echo $id; ?>">
<span class="glyphicon glyphicon-pencil"></span>
</a>
</td>
</tr>
<?php
    }
}
?>

修改后的JavaScript代码 #

// Custom JS To Show Modal Update Box
function updateStudentShow($id){
 $.ajax({
 method:"GET",
 url:"view.php",
 data:{id:$id},
 dataType:"JSON", // 修正拼写为驼峰式的dataType
 success:function(data){
 $("#update_name").val(data.name);
 $("#update_about").val(data.des);
 alert(data.name);
 console.log(data);
 },
 // 新增错误回调，方便调试请求问题
 error:function(xhr, status, error){
 console.log("请求出错：", error);
 console.log("响应内容：", xhr.responseText);
 }
 });
 $("#update").modal("show");
}

关键修改点说明 #

• PHP中的exit语句：处理完单个学生的JSON响应后，必须用exit或die终止脚本，阻止后续HTML代码输出，保证响应是纯JSON。
• dataType拼写修正：改成驼峰式后，jQuery会明确按JSON格式解析响应，避免解析错误。
• 添加Content-Type响应头：告诉浏览器响应是JSON类型，确保解析流程顺畅。

内容的提问来源于stack exchange，提问作者Hasnain Abid Khanzada