Question

我从ajax调用中获取json数据，如下所示：

/*
 * Get list of vendors and populate table
 */
function getVendors() {

    $
            .ajax({
                async : true,
                type : "GET",
                url : "/JavaTestService/rs/TestService/getMVendors?version=2",
                dataType : "json",

                success : function(json) {
                    //add element to vendors array
                    $.each(json.resultSet.merchandiseVendor, function(index,item){
                        nameLocal = item.name;
                        numberLocal = item.number;

                        vendorData[vendorDataCounter] = {
                                name : nameLocal,
                                number : numberLocal
                        }
                        vendorDataCounter++;
                    });
                    initVendorTable();
                },

                error : function(xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });

}

initVendorTable（）方法用于使用从上面的ajax调用获得的数据填充表。 initVendorTable（）方法如下所示：

/*
 * Initialize the table containing the list of vendors
 */
function initVendorTable() {

    jQuery("#supplierTable").jqGrid({
        datatype : "local",
        height : 250,
        colNames : [ 'Vendor Number', 'Vendor Name' ],
        colModel : [ {
            name : 'number',
            index : 'name',
            width : 200,
            sorttype : "int"
        }, {
            name : 'name',
            index : 'number',
            width : 200
        } ],
        rowNum : 10,
        rowList : [ 10, 20, 30 ],
        sortname : 'number',
        viewrecords : true,
        sortorder : "desc",
        caption : "Suppliers"
    });
    for(var i=0;i<=vendorData.length;i++){
        $("#supplierTable").jqGrid("addRowData",i+1,vendorData[i]);
    }

    alert(vendorData);

}

我通过点击按钮调用getVendors（）方法：

$(function() {

    $("#supplierSearchArea").dialog({
        autoOpen : false,
        height : 400,
        width : 'auto',
        modal : true,
        title : 'Browse Suppliers'
    });

    $("#supplierPopupButton").click(function(e) {

        $("#supplierSearchArea").dialog("open");
        getVendors();

    });

});

问题在于，当我第一次单击该按钮并显示包含该表的弹出窗口时，该表为空。这是因为我用来填充表的数组是空的。

在单步执行代码之后，我发现在getVendors（）方法之前调用了initVendorTable（）方法，即使我在代码中的initVendorTable（）方法之前调用了getVendors（）方法。这是一个ajax怪癖吗？关于如何解决这个问题的任何建议？

Answer 1

为避免使用async:false，一个解决方案可以是call，如下所示：

$.ajax({
//your ajax call
  ..
}).done(function(data){ //pass data to done callback
//use data
});

也许你可以像你说的那样设置一些加载gif。

http://api.jquery.com/deferred.done/

Answer 2

您需要将vendorData数组发送到initVendorTable函数。您必须编辑它的函数定义以将此数据作为参数接收。而且，从它的外观来看，你正在泄漏全局变量，这会给你意想不到的结果。每当定义变量时都要使用var关键字来阻止这种情况。

这是我修复的最佳尝试：

function getVendors() {

    $.ajax({
                async : true,
                type : "GET",
                url : "/JavaTestService/rs/TestService/getMVendors?version=2",
                dataType : "json",

                success : function(json) {

                    // initialize vendorData to empty array
                    // var keeps this variable local
                    var vendorData = [];

                    $.each(json.resultSet.merchandiseVendor, function(index, item){

                        // add element to vendorData
                        vendorData.push({
                                "name": item.name,
                                "number": item.number
                        });
                    });

                    // send the constructed array to the initVendorTable function
                    initVendorTable(vendorData);
                },

                error : function(xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
    });

}

这是initVendorTable函数的新定义：

/*
 * Initialize the table containing the list of vendors
 * vendorData is the array of data to process
 */

function initVendorTable(vendorData) {

    jQuery("#supplierTable").jqGrid({
        datatype : "local",
        height : 250,
        colNames : [ 'Vendor Number', 'Vendor Name' ],
        colModel : [ {
            name : 'number',
            index : 'name',
            width : 200,
            sorttype : "int"
        }, {
            name : 'name',
            index : 'number',
            width : 200
        } ],
        rowNum : 10,
        rowList : [ 10, 20, 30 ],
        sortname : 'number',
        viewrecords : true,
        sortorder : "desc",
        caption : "Suppliers"
    });
    for(var i=0;i<=vendorData.length;i++){
        $("#supplierTable").jqGrid("addRowData",i+1,vendorData[i]);
    }

    alert(vendorData);

}

我假设您对jqGrid插件的使用是准确的，因为我不熟悉它是如何工作的。

我希望这有帮助！

表不会立即显示通过ajax调用获得的数据

2 个答案: