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

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
        },
        (...)