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

Question

我阅读了一些有关 'asynchronise ajax json calls' 的内容，并且还在 youtube 上观看了一些教程。之后我想出了下面的代码 return 在一个名为 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);

这就是我现在要返回的内容（一个空对象）：

我现在检查了我的 select 列表中的内容，首先我尝试从列表中删除选项并且成功了。我得到以下输出：

当我检查选项中的内容时，我得到了如下值：

但是当我尝试使用以下代码从下拉列表中获取所有值时：

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

console.log(values);

我在控制台中找到了这个：

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

Answer 1

考虑一下您编写的代码。

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

$.getJSON是一个异步函数，意思是发送ajax请求，你指定的success回调函数只有在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 请求成功后执行。

以下将正确显示该值。

    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);
    });    
    });

编辑：考虑以下演示。

我使用 ajax 请求从维基百科加载一些结果并将其作为选项放入下拉列表中。不要为 URL.

而烦恼

单击 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>

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

How to make a variable of an Ajax GET request to retrieve JSON data?

ajax

jquery

json

getjson