javascript - 将ajax数据返回给对应于不同链接的不同函数

我很沮丧，试图解决我的心理障碍：回调。我读过How to return value from an asynchronous callback function?和How to return the response from an Ajax call?（在许多其他文章中），而后者确实有助于解决另一个问题。但是，我现在想要做的只是稍有不同，而我正迷失方向去尝试使其适应我的代码。也许我的方法是完全错误的/根本上有缺陷的（不仅仅是不成熟，我可以忍受）？

我的问题的实质是，我不仅要简单地将ajax结果返回给回调函数，还需要将所得的json提供给对应于不同事件的不同函数使用，即：

linkOne.onclick =调用ajaxReq + getJsonData，然后以getJsonData结果作为参数调用functionOne
linkTwo.onclick =调用ajaxReq + getJsonData，然后以getJsonData结果作为参数调用functionTwo
linkThree.onclick =调用ajaxReq + getJsonData，然后使用getJsonData结果作为参数调用functionThree

不能使用link.onclick定义完成此操作吗？为什么这样不起作用：

linkThree.onclick = functionOne(getJsonData);

这是我的代码：

function ajaxReq() {
    var request = new XMLHttpRequest();
    return request;
}

function getJsonData() {
    var request = ajaxReq();
    request.open("GET", "/myJSON.json", true);
    request.setRequestHeader("content-type", "application/json");
    request.send(null);
    request.onreadystatechange = function() {
        if (request.readyState === 4) {
            if (request.status === 200) {
                var myJsonString = JSON.parse(request.responseText);
                var myJsonArray = myJsonString["An Array in myJSON.json"];
                // functionOne(myJsonArray); // callback: what if I need to pass this value to various functions?
                return myJsonArray; // ... 'cause this ain't doin' it, and I don't know why
            }
        }
    } // onreadystatechange
} // getJsonData

function functionOne(myJsonArray) {
    var myJsonArray = getJsonData(); // why doesn't this work, since, in getJsonData, var request = ajaxReq(); returns an ajax request ?
}

以及为什么，如果var request = ajaxReq（）;调用ajaxReq函数并将其结果返回给getJsonData，是否执行var myJsonArray = getJsonData（）;在functionOne中不一样吗？

非常感谢您提供任何帮助。 （附：寻求纯JavaScript修复程序，而不是jQuery。）

svs

最佳答案

正如在您指定的链接中已经回答的那样，我们不能从异步调用返回值以在同步函数调用中使用它。所以这是窍门-

为所有onclick侦听器分配一个通用功能。

link1.onclick = someCommonfunction;
link2.onclick = someCommonfunction;
link3.onclick = someCommonfunction;

并定义如下的通用函数，该通用函数将在回调中包含json数据，您可以将该数据传递给任何函数调用。

function someCommonfunction(e) {
    /* this is the function which will be finally executed with json data after clicking */
    var callback = function(jsonData) {
        var myJsonArray = jsonData;
        //do some condition check and call functionOne, functionTwo or functionThree

    };
    getJsonData(callback);
}

我修改了getJsonData以使用响应数据调用callback。

function getJsonData(callback) {
    var request = ajaxReq();
    request.open("GET", "/myJSON.json", true);
    request.setRequestHeader("content-type", "application/json");
    request.send(null);
    request.onreadystatechange = function() {
        if (request.readyState === 4) {
            if (request.status === 200) {
                var myJsonString = JSON.parse(request.responseText);
                var myJsonArray = myJsonString["An Array in myJSON.json"];
                callback(myJsonArray);
            }
        }
    } // onreadystatechange
} // getJsonData

关于javascript - 将ajax数据返回给对应于不同链接的不同函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26809509/