【问题标题】：How to make json ajax call in jsTree如何在 jsTree 中进行 json ajax 调用
【发布时间】：2011-07-15 03:09:59
【问题描述】：

我想进行 ajax 调用以获取 results 节点的数据。在我的示例代码(see here) 中，进行了 ajax 调用，但服务器没有返回任何内容（使用 firebug 测试）但是如果我在 Web 浏览器中使用相同的 url，我可以保存 json 文件。

我的问题是：

如何使 ajax 调用工作，以便返回值显示在 jsTree 中？它工作得很好here - 搜索Using both the data & ajax config options
如何传递ajax调用参数
- 一个是父/父名称（basics 用于第一个结果节点）
- 第二个是父节点的名称（login 是第一个结果节点）

在下面查看我的代码或使用fiddle

<html>
  <head>
    <title>jsTree & ajax</title>

<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/_docs/syntax/!script.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.cookie.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>

    <script type='text/javascript'>
        data = [
                    {
                        "data" : "Basics",
                        "state" : "closed",
                                            "children" : [ {
                                                                "data" : "login",
                                                                    "state" : "closed",
                                                                    "children" : [ "login", {"data" : "results", "state" : "closed"} ]
                                                                    }   , 
                {
                "data" : "Basics",
                    "state" : "closed",
                    "children" : [ "login", "something",{"data" : "results", "state" : "closed"} ]
                    }    ]
                    },
                    {
                        "data" : "All",
                        "state" : "closed",
                "children" : [ {
                "data" : "AddCustomer",
                    "state" : "closed",
                    "children" : [ "login","Add", {"data" : "results", "state" : "closed"} ]
                    }   ]
                    }
                ]
$(function () {
        $("#jstree").jstree({
            "json_data" : {
                "data" : data ,
                "ajax" : { "url" : "http://www.jstree.com/static/v.1.0pre/_docs/_json_data.json" }
            },
            "plugins" : [ "themes", "json_data" ]
        });
    });
    </script>
  </head>
  <body>
<div id="jstree"></div>
  </body>
</html>

更新 1

即使我将示例代码从 jstree.com 复制到 jsfiddle，它也不起作用。我想我在某个地方遗漏了一些东西......

【问题讨论】：

标签： jquery-plugins jquery jstree

【解决方案1】：

尽量不要从您的服务器向另一台服务器进行 Ajax 调用 - 这将导致跨域安全异常。有很多方法可以绕过它（JSONP），但从您自己的服务器请求数据更简单。

一旦你整理好你的 ajax 请求，你可能想要向你的“结果”节点添加一些属性，以便 ajax 有一些可以挂钩的数据，例如身份证。比如：

"data": "results", "state": "closed", "attr": { "id": "node-123" }

然后您可以为 ajax 数据选项添加处理程序：

"ajax": {
    "url": "/my/local/json/",
    "data": function(n) {
        // get parent / grandparent node
        var lists = $(n).parents('ul');
        var p = $(lists[0]).prev('a');
        var gp = $(lists[1]).prev('a');
        // the result is fed to the AJAX request 'data' option
        return {
            "parent": $.trim(p.text()),
            "grandparent": $.trim(gp.text()),
            "id": n.attr ? n.attr("id").replace("node-", "") : 1,

        };
    }
}

这应该会产生一个 Ajax 请求，例如：http://myserver/my/local/json/?parent=login&grandparent=Basics&id=123

希望对您有所帮助。

编辑：这是为您更新的 JsFiddle：http://jsfiddle.net/robgallen/3uCX3/

【讨论】：

知道为什么，当我使用jsTreeGrid 你的代码没有给我父母和祖父母的名字吗？ jsfiddle.net/radek/Dax4D/1
是因为grid在A标签和UL标签之间加了一些div。尝试对两个变量 p 和 gp 使用 .siblings('a') 而不是 .prev('a')。
你是对的。一切都按预期工作。非常感谢您的帮助。
我不明白这个"id": n.attr ? n.attr("id").replace("node-", "") : 1,，你能解释一下吗？我以为你检查属性是否存在然后修改它，否则设置为 1。但我不确定。
它不是在测试布尔值，而是在测试 n.attr 不是 null 或未定义，所以只要它返回一些东西（在这种情况下是一个函数），它就会通过条件。基本上是为了确保当你调用 n.attr("id") 时它不会爆炸。