Jquery-每个循环不更新变量答案

【问题标题】：Jquery- each loop not updating variableJquery-每个循环不更新变量
【发布时间】：2012-09-11 18:10:50
【问题描述】：

谁能告诉我为什么这不起作用？

  var items = "<select id=\"orderer_search\" name=\"search\">";
  $.getJSON("https://dev.xxx.com", 
    function(data){
     $.each(data, function(index,item) { 
       items += "<option value='" + item + "'>" + item + "</option>";
     });           
  });

  items += "</select>";

如果我之前放置了一个警报（项目）：

items += "</select>";

值为：

<select id="orderer_search" name="search">

但是如果我在每个循环中放置一个警报，每个弹出窗口都会显示从 JSON 请求返回的值。

几乎就像每个循环结束后，它正在删除我在每个循环期间添加到items 变量中的所有内容。我是 JQuery 的新手，所以我确信这很简单。

【问题讨论】：

根据几个答案：如果您别无选择，您可以使用具有async: false 的ajax 调用。

标签： javascript jquery

【解决方案1】：

它并没有删除所有内容，当您执行 items += "</select>"; 时，JSON 请求还没有完成！

$.getJSON 异步运行，这意味着该语句开始对给定 URL 的请求，但它不等待答案，然后程序流程继续执行下一条语句（在您的情况下为 items += ... ，无需等待$.getJSON完成！只有当响应到达时，才会调用给定的成功函数。

对于如何解决这个问题，您有两种选择。备选方案 1 将推迟 items 字符串的所有组合，直到 $.getJSON 成功：

$.getJSON("https://dev.xxx.com", 
    function(data){
       var items = "<select id=\"orderer_search\" name=\"search\">";
       $.each(data, function(index,item) { 
           items += "<option value='" + item + "'>" + item + "</option>";
       });
       items += "</select>";
       alert(items); // or whatever else you have to do with items
    }
);

备选方案 2 是 make the $.getJSON call non-asynchronous，以便函数等待响应的到来。您必须使用 $.ajax 函数，如下所示：

var items = "<select id=\"orderer_search\" name=\"search\">";
$.ajax({
    url: "https://dev.webshop.restore.net.au/_pag/shop/TEST/?
          bc=TEST&sec=order%2F&pag=get_orderers_list",
    dataType: 'json',
    async: false,
    success: function(data) { 
        $.each(data, function(index,item) { 
            items += "<option value='" + item + "'>" + item + "</option>";
        }
    }
});
items += "</select>";
alert(items); // or whatever else you have to do with items

备选方案 1 有可能使您的脚本更具响应性，如果除了填写此选择之外还有其他事情要做的话；因为那时请求在后台运行，与您的其他代码准并行。所以我通常会这样做。

【讨论】：

谢谢。写得很好

【解决方案2】：

试过这样..???

var items = "<select id=\"orderer_search\" name=\"search\">";
$.getJSON("https://dev.webshop.restore.net.au/_pag/shop/TEST/?
          bc=TEST&sec=order%2F&pag=get_orderers_list", 
function(data){
 $.each(data, function(index,item) { 
   items += "<option value='" + item + "'>" + item + "</option>";
 }); 
   items += "</select>";
});

【讨论】：

【解决方案3】：

$.getJSON() 函数是异步的，这意味着你稍后会得到结果。

所以这部分代码是在之前执行的：

  items += "</select>";

您所要做的就是在响应您的 AJAX 请求时执行一切。

  var items;
  $.getJSON("https://dev.webshop.restore.net.au/_pag/shop/TEST/?
              bc=TEST&sec=order%2F&pag=get_orderers_list", 
    function(data){
     items = "<select id=\"orderer_search\" name=\"search\">";
     $.each(data, function(index,item) { 
       items += "<option value='" + item + "'>" + item + "</option>";
     });
     items += "</select>";
  });

【讨论】：