getJSON 中的数组推送答案

【问题标题】：Array push inside getJSONgetJSON 中的数组推送
【发布时间】：2016-06-28 13:28:06
【问题描述】：

我在 ahref 链接上使用以下函数作为 onclick 事件：

function checkOrgSaved() {
   var orgName = $.trim($("#orgName").val());
   var orgNames = new Array();

    $.getJSON("organizations?action=getOrganizations&onlyName=true&CSRFToken=" + csrf_token,   function (result) {
        for (var i = 0; i < Object.keys(result.Orgs).length; i++) {
            var org = result.Orgs[i].name;
            orgNames.push(org);
        }
    });

    if ($.inArray(orgName, orgNames) == -1 || orgName == 0){
        alert("Foobar.");
        $("#editLink").attr("href", "javascript:void(0);");
    }
}

像这样，if 语句中的orgNames 数组始终为空。为什么？

但是，如果我在getJSON 调用中声明orgNames 数组并将if 语句也放在getJSON() 调用中，则数组填充正确，但$("#editLink").attr("href", "javascript:void(0);"); 行不起作用并且通过单击 ahref 元素执行重定向。

我想要实现的是：如果 orgName 为空或不在 orgNames 数组中，则应抛出 JS 警报 - 无需在其他页面上重定向。

【问题讨论】：

JS 不会等待异步函数完成，它会跳到你的 if 块。将 if 块移到 for 循环下方的 getJSON 中。
How do I return the response from an asynchronous call?的可能重复

标签： javascript jquery scope

【解决方案1】：

这是因为$.getJSON 调用是异步的，这意味着if 语句将在接收到JSON 数据并执行回调并填充orgNames 之前执行。 p>

您可能希望在单击发生之前获取 JSON 并填充数组，然后再次检查值：

var orgNames = new Array();

$.getJSON("organizations?action=getOrganizations&onlyName=true&CSRFToken=" + csrf_token,   function (result) {
  for (var i = 0; i < Object.keys(result.Orgs).length; i++) {
    var org = result.Orgs[i].name;
    orgNames.push(org);
  }
});

function checkOrgSaved() {
  var orgName = $.trim($("#orgName").val());

  if ($.inArray(orgName, orgNames) == -1 || orgName == 0){
    alert("Foobar.");
    $("#editLink").attr("href", "javascript:void(0);");
  }
}

这也有助于避免对相同 JSON 数据的额外请求。

【讨论】：

这很好！即使阻止重定向！谢谢！

【解决方案2】：

尝试将您的代码更改为：

    function checkOrgSaved() {
       var orgName = $.trim($("#orgName").val());
       var orgNames = new Array();
       $.getJSON("organizations?action=getOrganizations&onlyName=true&CSRFToken=" + csrf_token,   function (result) {
            for (var i = 0; i < Object.keys(result.Orgs).length; i++) {
                var org = result.Orgs[i].name;
                orgNames.push(org);
            }
            if ($.inArray(orgName, orgNames) == -1 || orgName == 0){
              alert("Foobar.");
              $("#editLink").attr("href", "javascript:void(0);");
        }
        });   
    }

【讨论】：

【解决方案3】：

作为第二个参数传递给$.getJSON 的函数是一个将在异步HTTP 调用完成后执行的回调。

$.getJSON 之后的代码立即执行，这意味着当您尝试通过数组访问结果时，回调很可能尚未运行。

您必须将更新 UI 的逻辑移到回调函数中，以确保 HTTP 调用在执行时已经完成。

function checkOrgSaved() {
   var orgName = $.trim($("#orgName").val());
   var orgNames = new Array();

    $.getJSON("organizations?action=getOrganizations&onlyName=true&CSRFToken=" + csrf_token,   function (result) {
        for (var i = 0; i < Object.keys(result.Orgs).length; i++) {
            var org = result.Orgs[i].name;
            orgNames.push(org);
        }

        if ($.inArray(orgName, orgNames) == -1 || orgName == 0){
            alert("Foobar.");
            $("#editLink").attr("href", "javascript:void(0);");
        }
    });
}

欲了解更多信息，请查看at jQuery's docs。

【讨论】：

现在我的问题就像我上面提到的那样，$("#editLink").attr("href", "javascript:void(0);"); 行不再起作用了。单击 ahref 元素后执行重定向。
$("#editLink").attr("href", "#") 你不能这样做吗？

【解决方案4】：

Javascript 是一种asynchronous 语言，对吧？发生的情况是您的 if 语句在您的 get 函数的回调返回结果之前运行。

你应该像这样将你的 if 检查移到回调中：

$.getJSON("organizations?action=getOrganizations&onlyName=true&CSRFToken=" + csrf_token, function(result) {
    for (var i = 0; i < Object.keys(result.Orgs).length; i++) {
        var org = result.Orgs[i].name;
        orgNames.push(org);
    }
    if ($.inArray(orgName, orgNames) == -1 || orgName == 0) {
        alert("Foobar.");
        $("#editLink").attr("href", "javascript:void(0);");
    }
});

【讨论】：