全局变量在函数内为空答案

【问题标题】：global variable is empty within function全局变量在函数内为空
【发布时间】：2012-07-15 15:50:07
【问题描述】：

我有这个代码http://jsfiddle.net/meridius/ysDGm/，问题在于append 部分中的out.id 变量。由于我无法解释的原因，该变量在那部分是空的。

我认为问题在于该变量的范围，我尝试了所有方法，但没有运气。请注意，问题不在于 AJAX，它可以正常工作！

这是 Fiddle 的缩短版：

<tr>
    <td>one</td>
    <td>
        <select name="zadavatel">
            <option value="0">-- vyberte --</option>
            <option value="new">-- nový zadavatel --</option>
        </select>
    </td>
</tr>

var out = {};
$('select').bind("change", function() {
  if ($(this).val() == "new") {
    var nazev = prompt('Question', 
                $(this).parent().siblings(':first-child').text());
    if (nazev == null) {
      $(this).val($.data(this, 'current'));
      return false;
    } else {
      var pole2 = {};
      pole2["nazev"] = nazev;
      $.ajax({
        type    : "POST",
        cache    : false,
        url      : "./pokus_zad.php",
        data    : JSON.stringify(pole2),
        success  : function(data) {
          out = JSON.parse(data);  //data.id
        }
      });
      out.id = 15;  // this work, but it SHOULD work without it (with AJAX)
      $(this).closest('table').find('select').each(
        function() {
          $(this).append($('<option>', { "value" : out.id }).text(nazev));
        });
      $(this).closest('select').val(out.id).attr('selected', 'selected');
    }
  }
  $.data(this, 'current', $(this).val());
});

【问题讨论】：

搜索“返回 jquery ajax 值”。您会发现足够多的重复项。原因很简单：[global] 变量的值在使用时没有设置。就是这样。
stackoverflow.com/questions/560307/… , stackoverflow.com/questions/6917796/… , stackoverflow.com/questions/8532082/return-value-of-post-call , stackoverflow.com/questions/31129/… , stackoverflow.com/questions/1632039/return-value-from-ajax-call , stackoverflow.com/questions/1181665/…
AJAX 是异步的，因此在执行 ajax 调用时代码流会继续。您正在尝试在设置之前使用您的 out 变量。尝试将 ajax 调用后的代码移动到成功回调中
代码的其余部分在 ajax 调用执行时执行。把你的成功函数或设置一个回调，或者更好的延迟。

标签： jquery ajax variables global-variables scope

【解决方案1】：

AJAX 是异步的，因此在其中设置 out 变量将在函数的其余部分之后发生。

      $.ajax({
        type    : "POST",
        cache    : false,
        url      : "./pokus_zad.php",
        data    : JSON.stringify(pole2),
        success  : function(data) {
          out = JSON.parse(data);  //data.id
          $(this).closest('table').find('select').each(
            function() {
              $(this).append($('<option>', { "value" : out.id }).text(nazev));
            });
          $(this).closest('select').val(out.id).attr('selected', 'selected');
        }
      });

【讨论】：

【解决方案2】：

您应该将附加代码放在成功块中。因为 ajax 调用是异步的，所以 append 语句在 ajax 回调设置 'out' 变量之前运行。

var out = {};
$('select').bind("change", function() {
  if ($(this).val() == "new") {
    var nazev = prompt('Question', 
                $(this).parent().siblings(':first-child').text());
    if (nazev == null) {
      $(this).val($.data(this, 'current'));
      return false;
    } else {
      var pole2 = {};
      pole2["nazev"] = nazev;
      $.ajax({
        type    : "POST",
        cache    : false,
        url      : "./pokus_zad.php",
        data    : JSON.stringify(pole2),
        success  : function(data) {
          out = JSON.parse(data);  //data.id
          $(this).closest('table').find('select').each(
            function() {
              $(this).append($('<option>', { "value" : out.id }).text(nazev));
            });
          $(this).closest('select').val(out.id).attr('selected', 'selected');
        }
      });
    }
  }
  $.data(this, 'current', $(this).val());
});

【讨论】：

【解决方案3】：

太好了，谢谢大家！

根据您的建议，我将附加代码移至 AJAX 函数的成功回调 AND 我还必须为 $(this) 创建变量，因为它与 AJAX 中的 $(this) 不同外部。 ;)

工作的 JQuery 部分现在看起来像这样：

var out = {};
$('select').bind("change", function() {
    if ($(this).val() == "new") {
        var nazev = prompt('Zadejte název zadavatele', $(this).parent().siblings(':first-child').text());
        if (nazev == null) {
            $(this).val($.data(this, 'current'));
            return false;
        } else {
            var select = $(this);
            var pole2 = {};
            pole2["nazev"] = nazev;
            $.ajax({
                type        : "POST",
                cache       : false,
                url         : "./pokus_zad.php",
                data        : JSON.stringify(pole2),
                success : function(data) {
                    out = JSON.parse(data); //data.id
                    select.closest('table').find('select').each(
                        function() {
                            $(this).append($('<option>', { "value" : out.id }).text(nazev));
                        });
                    select.val(out.id).attr('selected', 'selected');
                }
            });
        }
    }
    $.data(this, 'current', $(this).val());
});

【讨论】：