执行异步 false 后无法从 ajax 函数传递数据

Question

我创建了一个休息服务，现在我正在尝试用数据创建一个图形用户界面。现在，我的 index.html 看起来像这样：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="loadingGrid.js"></script>
<script type="text/javascript" src="sortGrid.js"></script>
<script type="text/javascript" src="ag-grid-enterprise.js"></script>
  </head>
<title>Insert title here</title>
</head>
<body> 
<div id="myGrid" style="width: 100%; height: 71%;" class="ag-blue">
</div>
</body>
</html>

我的 file1.js 看起来像这样：

var rootURL = "http://localhost:8181/RestServiceProject/rest/WebService/getdata";
function findByName() {
    $.ajax({
        type: 'GET',
        url: rootURL,
        dataType: "json",
        async: false,
        success: function(json){  return json;    }
    });
}
(function(){
 var columnDefs = [
     {headerName: "CLIENT", field: "CLIENT_ACRONYM", width: 150, unSortIcon: true},
    {headerName: "SYM", field: "SYM", width: 150, unSortIcon: true, filter: 'set'},

];

var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableSorting: true,
    enableFilter: true,
    enableColResize: true

};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
   var jsondata = findByName()
var json = JSON.parse(jsondata);

function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

var parsedData = json.map(function(obj) {
    return Object.keys(obj).reduce(function(memo, key) {
        var value = obj[key];
        memo[key] = isNumeric(value) ? Number(value) : value;
        return memo;
    }, {})
});

gridOptions.api.setRowData(parsedData);
autoSizeAll();

});
})()

因此，当转到 localhost:8181/RestServiceProject 时，它会转到 myGrid div。然后在 file1.js 我做了一个 jQuery ajax 函数，我想在其中 return 成功的数据所以我做了 async: false，我正在调用 findByName() 在下面的 file1.js 中运行，并将值 returned 保存在 var json 中作为 var json = findByName()。但是 json 变量即将到来 undefined。为什么会这样？

Answer 1

您的 findByName 函数未返回任何内容，这就是您的 jsondata 变量未保存任何数据的原因。更好的是运行您在成功函数中设置数据的函数，如下所示：

function findByName() {
    $.ajax({
        type: 'GET',
        url: rootURL,
        dataType: "json",
        async: false,
        success: function(data){  
             var json = JSON.parse(data);

             function isNumeric(n) {
                 return !isNaN(parseFloat(n)) && isFinite(n);
             }

             var parsedData = json.map(function(obj) {
                 return Object.keys(obj).reduce(function(memo, key) {
                     var value = obj[key];
                     memo[key] = isNumeric(value) ? Number(value) : value;
                     return memo;
                 }, {})
             });

             gridOptions.api.setRowData(parsedData);
             autoSizeAll();

        }
    });
}

Answer 2

您正在从回调函数返回，这与从 findByName() 返回不同。您可以通过在回调函数中设置变量然后从包含函数返回它来做您想做的事。

function findByName() {
    var returnVal;
    $.ajax({
        type: 'GET',
        url: rootURL,
        dataType: "json",
        async: false,
        success: function(json){  returnVal = json;    }
    });
    return returnVal;
}

但是，如果您将应用程序设计为使用异步 AJAX 会更好。同步 AJAX 已弃用。参见 How do I return the response from an asynchronous call?

执行异步 false 后无法从 ajax 函数传递数据

Unable to pass data from ajax function after doing async false

ajax

rest

jquery

ag-grid