0

我从 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();

    });

});

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

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

4

2 回答 2

0

为了避免使用async:false一种解决方案，可以是call这样的：

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

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

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

于 2013-06-12T16:49:11.147 回答
0

您需要将 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 插件的使用是准确的，因为我不熟悉它的工作原理。

我希望这有帮助！

于 2013-06-12T16:59:17.730 回答