通过 JSP 获取 JSON 到 JS

Question

我在从我的 servlet 获取 JSON 字符串、通过我的 JSP 页面到我的 JavaScript 并导入到 Vakata/JStree 中时遇到了一些问题。

这就是我当前代码的样子。

小服务程序：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("Du är nu i DoGet MarketDataServlet");

    TreeBranchStringBuilder tbsb = new TreeBranchStringBuilder();       
    request.setAttribute("marketgrouplistJSONString", tbsb.getTreeBranchString(mm.getAllMarketgroups(), im.getAllItems()));
    request.getRequestDispatcher("/marketdata.jsp").forward(request, response);
}

JSP/HTML:

<div id="market_tree_branches">
</div>

<div id="hidden"><%= request.getAttribute("marketgrouplistJSONString") %></div>

JavaScript：

var marketnitemsString = $("#hidden").text();
console.log(marketnitemsString)
$('#market_tree_branches').jstree({
    'core' : {
        'data' : marketnitemsString
    }
});

从我的 JSP 生成的字符串如下所示：

[{"id":2,"text":"Blueprints","parent":"#"},{"id":204,"text":"Ships","parent":"2"},{"id":209,"text":"Ship Equipment","parent":"2"},{"id":211,"text":"Ammunition \u0026 Charges","parent":"2"},{"id":357,"text":"Drones","parent":"2"},{"id":943,"text":"Ship Modifications","parent":"2"},{"id":1041,"text":"Manufacture \u0026 Research","parent":"2"},{"id":1338,"text":"Structures","parent":"2"},{"id":9,"text":"Ship Equipment","parent":"#"},{"id":10,"text":"Turrets \u0026 Bays","parent":"9"}]

这是我在 Chrome 控制台日志中遇到的错误：

Uncaught Error: Syntax error, unrecognized expression: 
[{"id":2,"text":"Blueprints","parent":"#"},{"id":204,"text":"Ships","parent":"2"},{"id":209,"text":"Ship Equipment","parent":"2"},{"id":211,"text":"Ammunition \u0026 Charges","parent":"2"}, ........

我猜测在将其从 JSP/HTML 发送到 JavaScript 变量的过程中出现了问题，但我无法弄清楚是什么，因为 JStree 无法将其作为变量读取。但是，如果我将整个字符串从 HTML 复制/粘贴到“数据”中：它可以正常工作。

Answer 1

最好的办法是使用从 JavaScript 代码直接到 servlet 的 AJAX 调用。绝对没有理由让 JSP 介入其中。你可以这样做：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("Du är nu i DoGet MarketDataServlet");

    TreeBranchStringBuilder tbsb = new TreeBranchStringBuilder();       
    String json = bsb.getTreeBranchString(mm.getAllMarketgroups(), im.getAllItems());
    response.setContentType("application/json");
    response.getWriter().println(json);
}

对于 JavaScript 方面，这完全取决于您要使用的 JavaScript 框架。 JQuery is the easiest starting point 这个。

Answer 2

我不知道为什么你必须通过一个隐藏的元素：

var marketnitemsString = <%= request.getAttribute("marketgrouplistJSONString") %>;
$('#market_tree_branches').jstree({
    'core' : {
        'data' : marketnitemsString
    }
});

由于<% %>在解析js之前执行，它产生的文本然后被客户端解释为标准JS，只要它在语义上是正确的，它就会做应该做的事情（在变量）。

这与我实际使用的代码非常相似，因此即使我目前无法对其进行测试，我也很确定它可以工作。

另外，如果你的数据是一个数组，我不确定 core.data 元素是否可以接受它的字符串形式：

http://www.jstree.com/api/#/?f=$.jstree.defaults.core.data

所以这可能是您的代码问题的根源。