Question

我一直在努力关注this问题，这个问题与我有同样的问题。问题是希望能够返回Ajax响应。我想做同样但有点不同我需要在回调中使用带参数的函数吗？

我该怎么做？如何合并这两个，以便我能够返回Ajax请求，但仍然使用动态参数？

function foo(callback) {
    httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState === 4) { // request is done
            if (httpRequest.status === 200) { // successfully
                callback(httpRequest.responseText); // we're calling our method
            }
        }
    };
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
}


foo(function (result) {
    alert(result);
});

我的Ajax功能

var ajax_http,
        ajax_url,
        ajax_parameters;

function ajax(url, parameters, method, form = false) {
    ajax_http = new XMLHttpRequest();
    ajax_url = url;
    ajax_http.open(method, ajax_url, true);
    if (form === false) {
        ajax_parameters = parameters;
        ajax_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    } else {
        ajax_parameters = new FormData(form);
    }
    ajax_http.onreadystatechange = function () {
        if (ajax_http.readyState === 4 && ajax_http.status === 200) {
            return this.responseText;
        }
    };
    ajax_http.send(ajax_parameters);
}

如何将这两者结合起来，以便我可以在回调函数中使用带有参数的函数？

编辑 - 缺少正式参数

function ajax(callback, url, parameters, method, form = false) {
    var ajax_http,
            ajax_url,
            ajax_parameters;

    ajax_http = new XMLHttpRequest();
    ajax_url = url;
    ajax_http.open(method, ajax_url, true);

    if (form === false) {
        ajax_parameters = parameters;
        ajax_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    } else {
        ajax_parameters = new FormData(form);
    }

    ajax_http.onreadystatechange = function () {
        if (ajax_http.readyState === 4 && ajax_http.status === 200) {
            callback(ajax_http.responseText);
        }
    };
    ajax_http.send(ajax_parameters);
}


ajax(function (results, "ajax.php", "none", "POST", false) {
    alert(results);
});

Answer 1

要传递回调多个参数，你只需...在调用时执行此操作：

function ajax(callback, url, parameters, method, form = false) {
//            ^^^^^^^^---- *** accept a callback
    var ajax_http,            // *** These should be locals
            ajax_url,         // ***
            ajax_parameters;  // ***

    ajax_http = new XMLHttpRequest();
    ajax_url = url;
    ajax_http.open(method, ajax_url, true);
    if (form === false) {
        ajax_parameters = parameters;
        ajax_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    } else {
        ajax_parameters = new FormData(form);
    }
    ajax_http.onreadystatechange = function () {
        if (ajax_http.readyState === 4 && ajax_http.status === 200) {
            // *** Call the callback
            callback(ajax_http.responseText, anything, else, here, you, like);
        }
    };
    ajax_http.send(ajax_parameters);
}

例如，如果您想回显URL：

callback(ajax_http.responseText, url);

...或所有ajax参数：

callback(ajax_http.responseText, url, parameters, method, form);

...等

重新删除＆＃34;缺少形式参数＆＃34;错误，这是不正确的：

ajax(function (results, "ajax.php", "none", "POST", false) {
    alert(results);
});

您尝试将"ajax.php"（等）用作参数，而不是参数。代替：

ajax(function(results) {
    alert(results);
}, "ajax.php", "none", "POST", false);

或者，如果您将callback移至ajax参数列表的 end ：

function ajax(url, parameters, method, form, callback) {

...然后你用最后的功能调用它：

ajax("ajax.php", "none", "POST", false, function(results) {
    alert(results);
});

Answer 2

假设您想在

中使用parameters

ajax_http.onreadystatechange = function () {
    if (ajax_http.readyState === 4 && ajax_http.status === 200) {
        return this.responseText;
    }
};

功能，没有什么可以阻止你在那里简单地使用parameters：

ajax_http.onreadystatechange = function () {
    console.log(parameters) //Parameters works here!
    if (ajax_http.readyState === 4 && ajax_http.status === 200) {
        console.log(parameters) //Parameters works here too!
        return this.responseText;
    }
};

如果这不是您的意思，请告诉我

如何使用参数进行Ajax回调？

2 个答案: