在执行async false后无法从ajax函数传递数据

时间:2016-10-27 20:23:04

标签: jquery ajax rest ag-grid

我创建了一个休息服务,现在我正在尝试用数据创建一个gui。现在,我的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函数,我想在成功时返回数据,所以我做了async:false,我在file1.js中调用了下面的findByName()函数并将var json中返回的值保存为var json = findByName()。但是json变量即将到来undefined。为什么会这样?

2 个答案:

答案 0 :(得分:0)

你的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();

        }
    });
}

答案 1 :(得分:0)

你从回调函数返回,这与从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?