如何使Ajax GET请求的变量检索JSON数据？

Question

我做了一些关于'asynchronise ajax json calls'的阅读，我也在YouTube上看过一些教程。之后，我想出了下面的代码，以便在名为fieldList的全局变量中返回getJSON调用的响应。但我的var fieldList中的对象保持空白。我认为这是因为在填写var fieldList之后完成异步呼叫。但我现在迷失在如何解决这个问题上。那么任何人都可以用我的代码来帮助我？

我的js文件：

var fieldList = $("div.slctField"); 

    $("#slctTable").change(function() 
    { 
     $.getJSON("dropdown_code/get_fields.php?table=" + $(this).val(), success = function(data) 
     { 
      var options = ""; 
     for(var i = 0; i < data.length; i++) 
      { 
       options += "<option value='" + data[i] + "'>" + data[i] + "</option>"; 
      } 
     $("#slctField").html(""); 
     $("#slctField").append(options); 
     $("#slctField").change(); 
    });  
    }); 

console.log(fieldList); 

这是我的时刻找回（空物体）：现在我先要

我检查什么是我的选择列表试图从列表中获得选项并且工作。我得到了以下的输出：

当我检查什么是选项我得到了这样的价值观：

但是当我tryed把所有的值了与此代码下拉的：

var values = $("select#slctAttribute option").map(function() {return $(this).val();}).get(); 

console.log(values); 

我这回在我的控制台：

所以它仍然是空的，但我不知道为什么？

Answer 1

考虑你写的代码。

在$("#slctTable").change()，执行$.getJSON。

$.getJSON是一个异步函数，这意味着发送了ajax请求，并且只有在ajax成功完成后才会执行您指定的回调函数。

var fieldList = $("div.slctField"); 

    $("#slctTable").change(function() 
    { 
     $.getJSON("dropdown_code/get_fields.php?table=" + $(this).val(), success = function(data) 
     { 
      var options = ""; 
     for(var i = 0; i < data.length; i++) 
      { 
       options += "<option value='" + data[i] + "'>" + data[i] + "</option>"; 
      } 
     $("#slctField").html(""); 
     $("#slctField").append(options); 
     $("#slctField").change(); 
    });  
    }); 

console.log(fieldList); 

这意味着$.getJSON后的报表将继续执行。因此，当您达到console.log(fieldList);时，ajax可能尚未完成。所以$（“＃slctField”）的内容可能没有设置。

如果你在console.log里面成功回调，console.log会正确地报告这个值，因为它只有在ajax请求成功后才被执行。

以下将正确显示值。编号： 请考虑下面的演示。

我已使用ajax请求从维基百科加载一些结果并将其放置在您的下拉列表中作为选项。不要打扰网址。

点击getOptions按钮。比较console.log 1的对比度值 - 在成功回调之外和console.log 2 - 在成功回调的内部和结束处。

$(document).ready(function() { 
 

 
    var fieldList = $("#slctField"); 
 

 
    $("#selectButton").click(function() { 
 
    var query_url = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max"; 
 
    var search_txt = "ball"; 
 
    query_url += "&gsrsearch=" + search_txt; 
 
    query_url += "&callback=?" 
 

 
    $.getJSON(query_url, function(json) { 
 
     var options = ""; 
 
     var data = json["query"]["pages"]; 
 
     //console.log(data); 
 
     $.each(data, function(i, v) { 
 
     //console.log("console.log result: " + data["extract"]); 
 
     options += "<option value='" + v["extract"] + "'>" + v["extract"] + "</option>"; 
 
     }); 
 

 
     $("#slctField").html(""); 
 
     $("#slctField").append(options); 
 
     console.log("Console.log 1: Fieldlist " + fieldList.children().first().val()); 
 
    }); 
 
    }); 
 
    console.log("Console.log 2: Fieldlist " + fieldList.children().first().val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div> 
 
    <select id="slctField" class="slctField"> 
 
    </select> 
 
    <input type="button" value="Get Options" id="selectButton"> 
 
</div>