Question

我正在尝试使用我从服务（使用ajax调用）获取的JSON数据填充JSTree。但是，我在jquery.jstree.js文件中收到“既没有数据也没有ajax设置提供错误”。因此，JSTree只显示一个加载gif。

AJAX代码（编辑尝试将json设置为局部变量test，然后返回测试）

function getJSONData() {
    var test;
    $
            .ajax({
                async : true,
                type : "GET",
                url : "/JavaTestService/rs/TestService/MyFirstTestService?languageCode=en_US&version=2",
                dataType : "json",

                success : function(json) {
                    test = json;
                },

                error : function(xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                    test = "error";
                }
            });
    return test;
}

JSTree代码

var jsonData = getJSONData();
createJSTrees(jsonData);

function createJSTrees(jsonData) {
        $("#supplierResults").jstree({
            "json_data" : {
                "data" : jsonData
            },
            "plugins" : [ "themes", "json_data", "ui" ]
        });

经过一些调试后，我发现传递给createJSTrees方法时jsonData是未定义的。我是否在Ajax代码中正确检索数据？提前致谢

Answer 1

jsonData未定义，因为getJSONData（）不返回值。除非为$ .ajax调用完成后返回的getJSONData（）分配一个本地变量，否则不能依赖$ .ajax成功处理程序的返回值。但是你想要这样的东西，它也有异步的好处：

<script type="text/javascript">    

$(function() {
    $.ajax({
        async : true,
        type : "GET",
        url : "/JavaTestService/rs/TestService/MyFirstTestService?languageCode=en_US&version=2",
        dataType : "json",    

        success : function(json) {
            createJSTrees(json);
        },    

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

function createJSTrees(jsonData) {
    $("#supplierResults").jstree({
        "json_data" : {
            "data" : jsonData
        },
        "plugins" : [ "themes", "json_data", "ui" ]
    });
}    

</script>

Answer 2

我之前没有测试过您的方法，在那里您直接向json_data插件提供数据参数，因此我将无法为此方案提供答案。

但是，由于您使用AJAX调用来获取数据，您是否无法向JSTree提供AJAX调用并让它自己处理调用？以下是我在代码中配置AJAX调用的方法：

        (...)
        'json_data': {
            'ajax': {
                'url': myURL,
                'type': 'GET',
                'data': function(node) {
                    return {
                        'nodeId': node.attr ? node.attr("id") : ''
                    };
                }
            },
            'progressive_render': true,
            'progressive_unload': false
        },
        (...)

使用在AJAX中获取的JSON数据填充JSTree

2 个答案: