通过Ajax加载数据至jstree无显示，请求排查代码问题

你遇到的问题主要出在JSON数据的重复序列化以及jstree初始化/刷新的逻辑顺序上，我来帮你一步步排查修复：

1. 核心问题：后端重复序列化JSON #

你的后端代码里犯了一个典型错误：先用JsonConvert.SerializeObject(nodes)把节点数据转成了JSON字符串，然后又用Json()方法返回——而Json()本身会自动对传入的对象做序列化处理。这就导致前端拿到的json.jsonvar是一个JSON格式的字符串，而不是jstree需要的JavaScript对象数组。

jstree的core.data要求传入可直接解析的对象/数组，而非字符串，所以即使alert能显示内容，树也无法识别并渲染。

修复后端代码： #

去掉多余的手动序列化，直接返回nodes对象：

[HttpPost]
public IActionResult LoadChartList(int id) {
 // 生成nodes的业务逻辑
 return Json(new { jsonvar = nodes }); // 由Json()方法自动完成序列化
}

2. 前端逻辑优化：避免重复初始化+修正执行顺序 #

原前端代码还有两个小问题：

• reload_chart里嵌套了$(function () {})，完全没必要——按钮点击事件本身就是在DOM加载完成后触发的，嵌套会导致ajax逻辑延迟执行。
• 每次点击按钮都重新创建jstree实例，再调用refresh，这会导致实例冲突，反而无法正确渲染。

修复前端代码： #

调整逻辑，判断树是否已初始化，已初始化则更新数据并刷新，未初始化则创建实例：

function reload_chart() {
  $.ajax({
    async: true,
    type: "Post",
    url: "/Controller/Action?id=3",
    dataType: "json",
    success: function (json) {
      var treeElement = $('#jstreeChart');
      var treeInstance = treeElement.jstree(true);
      
      if (treeInstance) {
        // 树已存在，更新数据并刷新
        treeInstance.settings.core.data = json.jsonvar;
        treeInstance.refresh();
      } else {
        // 树未初始化，创建新实例
        createJSTrees(json.jsonvar);
      }
    }
  });
}

function createJSTrees(jsonparams) {
  $('#jstreeChart').jstree({
    "core": {
      "themes": {
        "variant": "large"
      },
      "data": jsonparams
    },
    "checkbox": {
      "keep_selected_style": false
    }
  });
}

验证小技巧 #

如果想确认前端拿到的是对象还是字符串，可以在success回调里加一行调试代码：

console.log(typeof json.jsonvar);

如果输出是string，说明后端序列化重复了；正常应该输出object（数组也属于object类型）。

内容的提问来源于stack exchange，提问作者topcool