将ajax数据返回到对应于不同链接的不同函数

Returning ajax data to different functions corresponding to different links

本文关键字：链接 函数 于不同 数据 ajax 返回      更新时间：2023-09-26

我正处于最大的挫败感，试图解决我的心理障碍re:回调。我读过如何从异步回调函数返回值？以及如何从Ajax调用返回响应？（在许多其他职位中），后者确实有助于解决另一个问题。然而，我现在尝试做的只是略有不同，我正在失去尝试将其适应我的代码的想法。也许我的方法完全错误/根本有缺陷（不仅仅是不成熟，我可以接受）？

我的问题的本质是，我不需要简单地将ajax结果返回给回调函数，而是需要生成的json可用于不同的函数，对应于不同的事件，即：

linkOne.onclick=调用ajaxReq+getJsonData，然后用getJsonData结果作为参数调用functionOnelinkTwo.onclick=调用ajaxReq+getJsonData，然后用getJsonData结果作为参数调用functionTwolinkThree.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（）；在功能上一个不做同样的事？

如有任何帮助，我们将不胜感激。（p.s.寻求纯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
相关文章：