Ajax加载数据至动态Listbox失败问题排查与修复请求

问题分析 #

你的代码无法正常显示数据的核心原因有以下几点：

• 错误遍历返回数据：后台返回的是数组格式的JSON，但你尝试访问parsedobj.criteriA_element_name，而这个属性并不存在于数组对象上，导致循环逻辑完全不执行。
• 冗余的JSON解析：Ajax设置了datatype: "json"（注意拼写错误，应为dataType首字母大写），jQuery会自动解析JSON响应，无需手动调用JSON.parse(result)。
• 元素未挂载到DOM：动态创建的select元素如果没有添加到页面DOM结构中，即使填充了数据也无法在页面上显示。

修复后的代码 #

// 创建动态select元素
var criteriA_element_name = document.createElement("select");
criteriA_element_name.setAttribute("name", "criteriA_element_name[]" + currentIndex);
criteriA_element_name.setAttribute("class", "form-control");

// 关键：将创建的select元素添加到页面DOM中（示例容器id为dynamic-container，可根据实际调整）
document.getElementById("dynamic-container").appendChild(criteriA_element_name);

$.ajax({
    type: "GET",
    url: "<?php echo base_url('index.php/TeacherEvaluation/get_EvaluationElementslist'); ?>",
    dataType: "json", // 修正拼写错误，jQuery自动解析JSON
    success: function(result){
        var appenddata = '';
        // 直接遍历后台返回的数组
        $.each(result, function(index, item) {
            // 使用element_ID作为option的value，更符合业务逻辑
            appenddata += `<option value="${item.element_ID}">${item.criteriA_element_name}</option>`;
        });
        $(criteriA_element_name).html(appenddata);
    },
    // 添加错误处理，便于排查问题
    error: function(xhr, status, error) {
        console.error("Ajax请求失败:", error);
    }
});

修复说明 #

1. 修正遍历逻辑：后台返回的是包含多个评估元素的数组，直接遍历result即可获取每个元素的信息。
2. 移除冗余解析：dataType: "json"会让jQuery自动将响应转换为JSON对象，避免重复解析导致的潜在问题。
3. 挂载元素到DOM：通过appendChild将动态创建的select添加到页面容器中，确保数据填充后能显示在页面上。
4. 优化value值：使用后台返回的element_ID作为option的value，相比索引更具业务意义，后续提交表单时能直接获取对应元素的ID。
5. 增加错误回调：在Ajax请求失败时打印错误信息，方便快速定位问题（比如接口地址错误、后台返回格式异常等）。

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