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

这就是我现在要回来的东西（一个空对象）：

我现在检查了我的选择列表中的内容，并且首先我尝试从列表中获取选项并且这样做有效。我得到了以下输出：

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

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

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

console.log(values);

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

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

Answer 1

考虑您编写的代码。

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

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

    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请求从Wikipedia加载一些结果并将其作为选项放入您的下拉列表中。不要打扰网址。

单击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数据？

1 个答案: