如何通过Ajax与PHP实现data-toggle类展开？遗留代码问题求助

我在维护遗留代码时遇到困难，需要实现触发data-toggle展开的功能。我已在verify_data函数中加入parsedResponse用于返回信息响应，但该功能无法正常运行。期望实现parsedResponse.success为true时，触发点击事件展开目标区域，寻求帮助。

function checkInfo(input_data) {
    var requestData = {
        data: input_data
    };
    var info = input_data;
    $.ajax({
        url: "/endpoint/search",
        type: 'POST',
        data: requestData,
        success: function(response) {
            $('.search_result').html(response);
            process_contacts();
            process_opportunities();
            verify_data(info, function(parsedResponse){
                if ($('#collapseOne').hasClass('collapse') && !($('#collapseOne').hasClass('show')) && parsedResponse.success === true){
                    $('.open_contact').click();
                    console.log(parsedResponse.success);
                }
            });
        }
    });
}

function verify_data(data) {
    $.ajax({
            url: '/endpoint/verify',
            type: 'POST',
            dataType: 'json',
            data: {
                data: data
            }
        })
        .done(function(response) {
            var parsedResponse = $.parseJSON(response);
            if (parsedResponse) {
                $('.save_info').removeAttr('disabled');
            } else {
                $('.save_info').attr('disabled', 'disabled');
            }
            return parsedResponse;
        })
}

核心问题 #

1. verify_data函数未定义回调参数，也没有在AJAX请求完成后触发传入的回调——你在checkInfo里传递了回调函数，但verify_data根本没处理这个参数，导致逻辑无法执行。
2. 因为已指定dataType: 'json'，jQuery会自动将响应解析为JSON对象，手动调用$.parseJSON(response)属于冗余操作，甚至可能引发解析错误。
3. AJAX是异步操作，return parsedResponse无法将结果返回给调用者，必须通过回调或Promise传递数据。

修复后的代码 #

function checkInfo(input_data) {
    var requestData = {
        data: input_data
    };
    var info = input_data;
    $.ajax({
        url: "/endpoint/search",
        type: 'POST',
        data: requestData,
        success: function(response) {
            $('.search_result').html(response);
            process_contacts();
            process_opportunities();
            // 调用修复后的verify_data并传入回调
            verify_data(info, function(parsedResponse){
                // 简化判断逻辑：只要目标区域未展开且验证成功就触发点击
                if (!$('#collapseOne').hasClass('show') && parsedResponse.success === true){
                    $('.open_contact').click();
                    console.log(parsedResponse.success);
                }
            });
        }
    });
}

function verify_data(data, callback) { // 添加回调参数
    $.ajax({
            url: '/endpoint/verify',
            type: 'POST',
            dataType: 'json', // jQuery自动解析JSON，无需手动处理
            data: {
                data: data
            }
        })
        .done(function(response) {
            var parsedResponse = response;
            if (parsedResponse) {
                $('.save_info').removeAttr('disabled');
            } else {
                $('.save_info').attr('disabled', 'disabled');
            }
            // 确保回调存在时执行，传递结果
            if (typeof callback === 'function') {
                callback(parsedResponse);
            }
        })
}

额外优化建议 #

可以改用Promise链式调用替代回调，让代码逻辑更清晰：

function verify_data(data) {
    return $.ajax({
            url: '/endpoint/verify',
            type: 'POST',
            dataType: 'json',
            data: {
                data: data
            }
        })
        .done(function(response) {
            if (response) {
                $('.save_info').removeAttr('disabled');
            } else {
                $('.save_info').attr('disabled', 'disabled');
            }
            return response;
        });
}

// 在checkInfo中调用
verify_data(info).then(function(parsedResponse) {
    if (!$('#collapseOne').hasClass('show') && parsedResponse.success === true){
        $('.open_contact').click();
        console.log(parsedResponse.success);
    }
});

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