Question

我有这段代码：

$.getJSON('http://myjsonurl', function(json){console.log(JSON.stringify(json.columns)); });

这将从我的json响应中返回控制台中所需的全部内容。我的目标是将这个值放入一个函数中，以便我可以在另一个地方调用它。（例如：

"columns" : getColumns();

所以我正在制作这样的函数：

function getColumns() {
    $.getJSON('http://myjsonurl', function(json){return JSON.stringify(json.columns); });
    }

console.log(getColumns()); // and then call the function in the console log expecting to see the same result as before.

但我得到的都是未定义的。为什么呢？

更新：

这就是我实现我想要的方式。以下代码将基于具有数据和列的json响应重新启动数据表（本地不支持数据表的内容）。代码将使用新的查询参数重新加载表，并包含按钮插件：

var theurl;
theurl = "http://myjson.json";


function updateQueryStringParameternondt(key, value) {
    var table = $('#datatable-buttons').DataTable();
    var ajaxurl = theurl;   
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = ajaxurl.indexOf('?') !== -1 ? "&" : "?";
  if (ajaxurl.match(re)) {
    console.log( ajaxurl.replace(re, '$1' + key + "=" + value + '$2'));
    theurl = ajaxurl.replace(re, '$1' + key + "=" + value + '$2');
    table.destroy();
    TableManageButtons.init();

  }
  else {
       console.log( ajaxurl + separator + key + "=" + value);
    theurl =  ajaxurl + separator + key + "=" + value ;
    table.destroy();
    TableManageButtons.init();
  }
}

TableManageButtons.init();

var handleDataTableButtons = function() {


        0 !== $("#datatable-buttons").length && 

    $.ajax( {
  url:theurl,
  dataType: 'json',
  success: function ( json ) {

      $("#datatable-buttons").DataTable({
        "data" : json.data,
        "columns": json.columns,    
            dom: "Bfrtip",
            buttons: [{
                extend: "copy",
                className: "btn-sm"
            }, {
                extend: "csv",
                className: "btn-sm"
            }, {
                extend: "excel",
                className: "btn-sm"
            }, {
                extend: "pdf",
                className: "btn-sm"
            }, {
                extend: "print",
                className: "btn-sm"
            }],
            responsive: !0
        });
         }
} );
    },
    TableManageButtons = function() {
        "use strict";
        return {
            init: function() {
                handleDataTableButtons();
            }
        };
    }();

Answer 1

正如@MiguelBolan所指出的，getColmuns()没有返回任何值。来自return的{{1}} $.getJSON();使用.then()访问从异步函数返回的值

getColumns()

Answer 2

@ guest271314答案是正确的，应指导您解决有关从getColumns方法返回未定义的问题。

我只想在这里指出一些重要的事情。

首先调查我刚才创建的plunk。正如您所看到的，这里的所有内容都是操纵Deferred对象（有关详细信息，请参阅here）。 Rougly解释说，Deferred对象可以注册回调，如果你喜欢多个，可以链接它们，通过调用它们可以广播它们的状态以及它们的响应。它基于promises设计，因此这样的方法返回一个可以解析，同步或异步的promise（大多数时候promises在异步操作中都很有用）。

jQuery的异步方法，如$.ajax返回一个承诺。 $.getJSON没有什么不同，因为它最后会调用$.ajax，如上所述返回jQuery Deferred Promise。

对于jQuery的animation方法，请参阅下面的@ guest271314评论。

更多关于承诺here。

来自文档：

返回一个Promise对象，以观察绑定到已排队或未排队的某个类型的所有操作是否已完成。

promise处理时，已解决或已拒绝。 resolve代表成功回复，因为reject代表失败。从文档中我们可以看到有Deferred对象的方法来处理成功，失败或两者兼而有之。

deferred.done（）添加Deferred对象时要调用的处理程序   解决。

deferred.fail（）添加要在拒绝延迟对象时调用的处理程序。

deferred.always（）添加要在解析或拒绝Deferred对象时调用的处理程序。

所以，让我们回到OP的问题。正如您现在可以从代码中看到的那样：

function getColumns() {
    $.getJSON('http://myjsonurl', function(json){return JSON.stringify(json.columns); });
}

您无法知道getColumns状态，因为您没有返回promise。使用$.getJSON处理程序时，您基本上处理响应，而不会发出promise对象。 getColumns函数当然会返回undefined，因为没有return的符号，默认情况下会得到{。}}。

关于deferred.then()方法，使用此方法，您还可以处理其承诺，处理其状态及其进度。在上面发布的Plunker I中的示例代码中，我不关心进度，只关心状态，所以在第一个例子中，使用.then()方法处理promise，第一个函数是成功处理程序和第二个函数是失败处理程序。从他们那里返回回复本质上意味着承诺得到解决。我也回复了承诺。

在注释掉的部分中，您可以看到，如果您愿意，可以仅返回承诺，并在always方法中解析回复

Answer 3

您的getColumns()函数需要返回变量，此时它只返回到函数但不会退出。试试这个： {

function getColumns() {
    var ret;
    $.getJSON('http://myjsonurl', function(json){
          ret = JSON.stringify(json.columns); 
          });
    return ret;
    }

返回Json.Stringfy结果

3 个答案: