传递包含参数的回调函数？

Question

我有下面的代码...

function getGrades(grading_company) {

    if (grading_company == 'Not Specified') {

        // Remove grades box & show condition box
        showConditionBox();

    } else {

        // Set file to get results from..
        var loadUrl = "ajax_files/get_grades.php";

        // Set data string
        var dataString = 'gc_id=' + grading_company;

        // Set the callback function to run on success
        var callback = showGradesBox;

        // Run the AJAX request
        runAjax(loadUrl, dataString, callback);  

    }

}

function runAjax(loadUrl, dataString, callback) {

    jQuery.ajax({
        type: 'GET',
        url: loadUrl,
        data: dataString,
        dataType: 'html',
        error: ajaxError,
        success: function(response) {
            callback(response);
        }
    });    

}

编辑: 这是被作为回调函数调用的函数：

function showGradesBox(response) {

    // Load data into grade field
    jQuery('#grade').html(response);

    // Hide condition fields
    jQuery('#condition').hide();
    jQuery('#condition_text').hide();

    // Show grade fields
    jQuery('#grade_wrapper').show();
    jQuery('#grade_text_wrapper').show();    

}

现在，如果我想将grading_company变量作为参数传递给回调函数，有没有一种方法可以在不添加它作为runAjax调用中的另一个参数的情况下实现？ 我试图使runAjax函数对其他用途开放，因此不想传递任何额外的参数； 但是如果它可以在回调函数内部某种方式包含，那就太好了。

- Brett

---

在 success 函数中，不要忘记检查回调函数是否为函数：if (typeof callback == 'function') { callback(response); }，因为你的回调函数可能没有设置... 通常情况下，回调函数是可选的。 - algorhythm

Answer 1

将您的回调函数更改为匿名函数：

// Set the callback function to run on success
var callback = function () {
    showGradesBox(grading_company);
};

这允许您将参数传递给内部函数。

编辑：为了允许ajax响应：

// Set the callback function to run on success
var callback = function (response) {
    showGradesBox(grading_company, response);
};

- jbabey

---

那么我应该在哪里添加这段代码呢？是在所有其他函数之外吗？那么就不需要将 showGradesBox 作为回调函数传递进去了，还是说……？我不太确定如何使用它。 - Brett

@Brett，这段代码将替换你在getGrades函数中当前声明的var callback = showGradesBox;。 - jbabey

@jbabey 哦，好的，有道理。不过 showGradesBox 函数仍然会从通过 runAjax 调用时发送的 response 参数中接收到它吗？这两个参数的接收顺序是什么？ - Brett

@jbabey 我按照这个方法尝试了一下，似乎只是将“grading_company”传递给了函数，现在不确定如何将ajax响应也传递给它？ - Brett

@jbabey 太棒了 - 谢谢！那么我在 runAjax 函数内调用它时就不需要做任何更改了吗？ - Brett

Answer 2

另一种可能性是不使用 dataString，而是使用 dataObject，然后将该对象传递给回调函数。像这样：

function getGrades(grading_company) {

    if (grading_company == 'Not Specified') {

        // Remove grades box & show condition box
        showConditionBox();

    } else {

        // Set file to get results from..
        var loadUrl = "ajax_files/get_grades.php";

        // Set data object
        var dataObject = {
            'gc_id' : grading_company
            /*to do multiples..
            'item1' : value1, 
            'item2' : value2, 
            'etc' : etc */
        }

        // Set the callback function to run on success
        var callback = showGradesBox;

        // Run the AJAX request
        runAjax(loadUrl, dataObject, callback);  

    }

}

function runAjax(loadUrl, dataObject, callback) {

    jQuery.ajax({
        type: 'GET',
        url: loadUrl,
        data: $.param(dataObject),
        dataType: 'html',
        error: ajaxError,
        success: function(response) {
            callback(response, dataObject);
        }
    });    

}

请注意添加$.param()。

然后在回调函数中，您应该知道您要获取的数据。如果function setGrades(resp, data) { ... }是回调函数，则可以在setGrades中访问这些值。

function setGrades(resp, data) {
   alert( data.gc_id);
}

编辑

经过测试，我发现$(dataObject).serialize()不起作用。所以我已经更新为使用$.param()。请参见此SO帖子获取更多信息。

- jwatts1980

---

不错的想法 - 谢谢！ - Brett

我已经更新了答案，使用$.param()。在我使用它的上下文中，serialize()将无法工作。 - jwatts1980