本文讲解如何在 jQuery AJAX 成功回调中安全访问嵌套 JSON 响应（如 { "policy": [...] }）中的数组元素，并正确提取 policy_name 等字段，避免 Cannot read properties of undefined 错误。
本文讲解如何在 jquery ajax 成功回调中安全访问嵌套 json 响应（如 `{ "policy": [...] }` 中的数组元素，并正确提取 `policy_name` 等字段，避免 `cannot read properties of undefined` 错误。
你遇到的错误 Uncaught TypeError: Cannot read properties of undefined (reading 'policy_name') 根本原因在于：AJAX 默认将响应体当作字符串处理，未自动解析为 JavaScript 对象，因此 response['policy'] 实际是 undefined，后续访问 .policy_name 必然报错。
此外，你的后端返回结构是：
{"policy":[{"id":"1","policy_name":"Policy 1",...}]}
即 policy 是一个包含单个对象的数组（注意中括号 []），而非直接的对象。因此即使 JSON 已解析，也需先访问数组首项（如 response.policy[0].policy_name），而非 response.policy.policy_name。
✅ 正确做法分两步：
- 显式声明 dataType: "json" —— 让 jQuery 自动调用 JSON.parse()，确保 response 是原生 JS 对象；
- 按实际结构访问嵌套属性 —— response.policy 是数组，需索引或遍历。
以下是修正后的完整 AJAX 代码（含健壮性处理）：
$("*[id^='pol_action']").each(function() {
$(this).change(function(){
var value = $(this).val();
var id = $('option:selected', this).attr('r-id');
if(value === 'edit') {
$.ajax({
url: "<?php echo base_url();?>admin/leads/getPolData",
type: "POST",
data: { id: id },
dataType: "json", // ✅ 关键：强制解析为 JSON 对象
success: function(response) {
// ✅ 安全访问：检查 policy 是否存在且为非空数组
if (response.policy && Array.isArray(response.policy) && response.policy.length > 0) {
var firstPolicy = response.policy[0];
alert(firstPolicy.policy_name); // → "Policy 1"
// ✅ 推荐：填充模态框表单（更实用）
$('#update_policy_modal input[name="policy_name"]').val(firstPolicy.policy_name);
$('#update_policy_modal textarea[name="description"]').val(firstPolicy.description);
// ... 其他字段同理
$('#update_policy_modal').modal('show');
} else {
console.warn("No policy data received or invalid structure");
}
},
error: function(xhr, status, error) {
console.error("AJAX Error:", status, error);
}
});
}
});
});
⚠️ 注意事项：
- 不要省略 dataType: "json"：若不设置，response 是字符串，需手动 JSON.parse(response)，且易因格式错误抛异常；
- 永远验证数据结构：response.policy 可能为 null、undefined 或空数组，直接 .policy[0] 存在风险；
- 后端可优化返回结构：若每次仅查一条记录，模型层可改用 ->row()（CodeIgniter）返回单对象，使结构变为 {"policy": {...}}，此时访问 response.policy.policy_name 更直观；
- 避免在生产环境使用 alert()：建议用 console.log() 或 UI 提示替代，提升用户体验。
通过以上调整，即可稳定、安全地从 AJAX 响应中提取并展示 policy_name 等字段。
