jsTree中的语法错误
Syntax error in jsTree
我一直在玩 jsTree 网站 (https://www.jstree.com/demo_sitebrowser/index.php) 上的数据库演示。我将它下载到我的服务器上，只是更改了 $.jstree.defaults.core.data.url 并删除了一些侦听器。现在的代码是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="//static.jstree.com/latest/assets/dist/themes/default/style.min.css" />
<style>
html, body { background:#ebebeb; font-size:10px; font-family:Verdana; margin:0; padding:0; }
#container { min-width:320px; margin:0px auto 0 auto; background:white; border-radius:0px; padding:0px; overflow:hidden; }
#tree { float:left; min-width:319px; border-right:1px solid silver; overflow:auto; padding:0px 0; }
#data { margin-left:320px; }
#data textarea { margin:0; padding:0; height:100%; width:100%; border:0; background:white; display:block; line-height:18px; }
#data, #code { font: normal normal normal 12px/18px 'Consolas', monospace !important; }
</style>
</head>
<body>
<div id="container" role="main">
<div id="tree"></div>
<div id="data">
<div class="content code" style="display:none;"><textarea id="code" readonly="readonly"></textarea></div>
<div class="content folder" style="display:none;"></div>
<div class="content image" style="display:none; position:relative;"><img src="" alt="" style="display:block; position:absolute; left:50%; top:50%; padding:0; max-height:90%; max-width:90%;" /></div>
<div class="content default" style="text-align:center;">Select a node from the tree.</div>
</div>
</div>
<script src="//static.jstree.com/latest/assets/dist/libs/jquery.js"></script>
<script src="//static.jstree.com/latest/assets/dist/jstree.min.js"></script>
<script>
$(function () {
$(window).resize(function () {
var h = Math.max($(window).height() - 0, 420);
$('#container, #data, #tree, #data .content').height(h).filter('.default').css('lineHeight', h + 'px');
}).resize();
$('#tree')
.jstree({
'core' : {
'data' : {
'url' : './JSON/GetChildren',
'data' : function (node) {
return { 'id' : node.id };
}
},
'force_text' : true,
'check_callback' : true,
'themes' : {
'responsive' : false
}
}
})
.on('changed.jstree', function (e, data) {
if(data && data.selected && data.selected.length) {
$.get('?operation=get_content&id=' + data.selected.join(':'), function (d) {
$('#data .default').text(d.content).show();
});
}
else {
$('#data .content').hide();
$('#data .default').text('Select a file from the tree.').show();
}
});
});
</script>
</body>
</html>
加载时，jsTree 正在请求 ./JSON/GetChildren?id=# 渲染第一级节点，return 是这样的：
我一直在玩 jsTree 网站 (https://www.jstree.com/demo_sitebrowser/index.php) 上的数据库演示。我将它下载到我的服务器上，只是更改了 $.jstree.defaults.core.data.url 并删除了一些侦听器。现在的代码是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="//static.jstree.com/latest/assets/dist/themes/default/style.min.css" />
<style>
html, body { background:#ebebeb; font-size:10px; font-family:Verdana; margin:0; padding:0; }
#container { min-width:320px; margin:0px auto 0 auto; background:white; border-radius:0px; padding:0px; overflow:hidden; }
#tree { float:left; min-width:319px; border-right:1px solid silver; overflow:auto; padding:0px 0; }
#data { margin-left:320px; }
#data textarea { margin:0; padding:0; height:100%; width:100%; border:0; background:white; display:block; line-height:18px; }
#data, #code { font: normal normal normal 12px/18px 'Consolas', monospace !important; }
</style>
</head>
<body>
<div id="container" role="main">
<div id="tree"></div>
<div id="data">
<div class="content code" style="display:none;"><textarea id="code" readonly="readonly"></textarea></div>
<div class="content folder" style="display:none;"></div>
<div class="content image" style="display:none; position:relative;"><img src="" alt="" style="display:block; position:absolute; left:50%; top:50%; padding:0; max-height:90%; max-width:90%;" /></div>
<div class="content default" style="text-align:center;">Select a node from the tree.</div>
</div>
</div>
<script src="//static.jstree.com/latest/assets/dist/libs/jquery.js"></script>
<script src="//static.jstree.com/latest/assets/dist/jstree.min.js"></script>
<script>
$(function () {
$(window).resize(function () {
var h = Math.max($(window).height() - 0, 420);
$('#container, #data, #tree, #data .content').height(h).filter('.default').css('lineHeight', h + 'px');
}).resize();
$('#tree')
.jstree({
'core' : {
'data' : {
'url' : './JSON/GetChildren',
'data' : function (node) {
return { 'id' : node.id };
}
},
'force_text' : true,
'check_callback' : true,
'themes' : {
'responsive' : false
}
}
})
.on('changed.jstree', function (e, data) {
if(data && data.selected && data.selected.length) {
$.get('?operation=get_content&id=' + data.selected.join(':'), function (d) {
$('#data .default').text(d.content).show();
});
}
else {
$('#data .content').hide();
$('#data .default').text('Select a file from the tree.').show();
}
});
});
</script>
</body>
</html>
加载时，jsTree 正在请求 ./JSON/GetChildren?id=# 渲染第一级节点，return 这个：
[
{
"id": 389,
"text": "consequat",
"children": true
},
{
"id": 316,
"text": "orci luctus",
"children": true
},
{
"id": 356,
"text": "tellus non",
"children": true
},
{
"id": 328,
"text": "dictum",
"children": true
},
{
"id": 335,
"text": "auctor ullamcorper",
"children": true
},
{
"id": 355,
"text": "id mollis",
"children": true
},
{
"id": 351,
"text": "Morbi sit",
"children": true
},
{
"id": 358,
"text": "sit",
"children": true
},
{
"id": 391,
"text": "odio Phasellus",
"children": true
},
{
"id": 327,
"text": "nunc",
"children": true
},
{
"id": 346,
"text": "eu",
"children": true
},
{
"id": 386,
"text": "lorem",
"children": true
},
{
"id": 333,
"text": "metus vitae velit",
"children": true
},
{
"id": 367,
"text": "orci Ut",
"children": true
},
{
"id": 336,
"text": "auctor",
"children": true
},
{
"id": 322,
"text": "quis diam Pellentesque",
"children": true
},
{
"id": 303,
"text": "dolor",
"children": true
},
{
"id": 302,
"text": "Aliquam auctor velit",
"children": true
},
{
"id": 304,
"text": "turpis nec",
"children": true
},
{
"id": 349,
"text": "Aliquam",
"children": true
},
{
"id": 382,
"text": "Duis a",
"children": true
},
{
"id": 339,
"text": "euismod mauris",
"children": true
},
{
"id": 310,
"text": "facilisis facilisis magna",
"children": true
},
{
"id": 385,
"text": "cursus",
"children": true
},
{
"id": 345,
"text": "auctor",
"children": true
},
{
"id": 369,
"text": "non hendrerit id",
"children": true
},
{
"id": 330,
"text": "Curabitur consequat lectus",
"children": true
},
{
"id": 320,
"text": "ornare",
"children": true
},
{
"id": 332,
"text": "mauris Suspendisse aliquet",
"children": true
},
{
"id": 365,
"text": "dolor Nulla semper",
"children": true
},
{
"id": 361,
"text": "convallis convallis",
"children": true
},
{
"id": 344,
"text": "enim",
"children": true
},
{
"id": 348,
"text": "quam",
"children": true
},
{
"id": 375,
"text": "nec",
"children": true
},
{
"id": 384,
"text": "ornare",
"children": true
},
{
"id": 342,
"text": "amet ultricies",
"children": true
},
{
"id": 363,
"text": "sociis natoque penatibus",
"children": true
},
{
"id": 326,
"text": "tincidunt neque",
"children": true
},
{
"id": 353,
"text": "ipsum porta elit",
"children": true
},
{
"id": 395,
"text": "pharetra Quisque ac",
"children": true
},
{
"id": 400,
"text": "imperdiet nec",
"children": true
},
{
"id": 352,
"text": "sed turpis",
"children": true
},
{
"id": 381,
"text": "quis accumsan convallis",
"children": true
},
{
"id": 393,
"text": "nisl",
"children": true
},
{
"id": 317,
"text": "volutpat ornare",
"children": true
},
{
"id": 323,
"text": "Sed",
"children": true
},
{
"id": 376,
"text": "arcu",
"children": true
},
{
"id": 315,
"text": "amet ante Vivamus",
"children": true
},
{
"id": 359,
"text": "euismod ac fermentum",
"children": true
},
{
"id": 368,
"text": "gravida non sollicitudin",
"children": true
},
{
"id": 305,
"text": "Aliquam",
"children": true
},
{
"id": 360,
"text": "Integer sem",
"children": true
},
{
"id": 340,
"text": "velit eget",
"children": true
},
{
"id": 341,
"text": "erat semper",
"children": true
},
{
"id": 354,
"text": "lacinia orci consectetuer",
"children": true
},
{
"id": 390,
"text": "ridiculus",
"children": true
},
{
"id": 357,
"text": "lobortis quis",
"children": true
},
{
"id": 301,
"text": "Nullam",
"children": true
},
{
"id": 319,
"text": "Etiam",
"children": true
},
{
"id": 324,
"text": "ut nisi",
"children": true
},
{
"id": 347,
"text": "dictum augue",
"children": true
},
{
"id": 396,
"text": "Quisque ornare",
"children": true
},
{
"id": 325,
"text": "nec mollis vitae",
"children": true
},
{
"id": 364,
"text": "risus Nulla eget",
"children": true
},
{
"id": 337,
"text": "eu ligula Aenean",
"children": true
},
{
"id": 379,
"text": "dis parturient",
"children": true
},
{
"id": 343,
"text": "faucibus orci",
"children": true
},
{
"id": 312,
"text": "imperdiet nec",
"children": true
},
{
"id": 318,
"text": "ipsum sodales",
"children": true
},
{
"id": 338,
"text": "lorem vitae odio",
"children": true
},
{
"id": 397,
"text": "nec mauris blandit",
"children": true
},
{
"id": 374,
"text": "vitae erat Vivamus",
"children": true
},
{
"id": 398,
"text": "elit Curabitur sed",
"children": true
},
{
"id": 308,
"text": "rhoncus Nullam velit",
"children": true
},
{
"id": 388,
"text": "Duis",
"children": true
},
{
"id": 370,
"text": "lorem",
"children": true
},
{
"id": 311,
"text": "id",
"children": true
},
{
"id": 314,
"text": "sit amet",
"children": true
},
{
"id": 383,
"text": "metus In nec",
"children": true
},
{
"id": 394,
"text": "consectetuer ipsum nunc",
"children": true
},
{
"id": 307,
"text": "dui Cum",
"children": true
},
{
"id": 380,
"text": "arcu ac",
"children": true
},
{
"id": 329,
"text": "molestie",
"children": true
},
{
"id": 362,
"text": "posuere enim",
"children": true
}
]
但是，我收到一条 "syntax error" 消息，但我看不到它来自哪里。 JSON 有效，jsTree 加载并请求它，所以发生了什么？
我知道了。问题是 ./JSON/GetChildren?id=# 的 header 没有设置为 application/json。
我一直在玩 jsTree 网站 (https://www.jstree.com/demo_sitebrowser/index.php) 上的数据库演示。我将它下载到我的服务器上，只是更改了 $.jstree.defaults.core.data.url 并删除了一些侦听器。现在的代码是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="//static.jstree.com/latest/assets/dist/themes/default/style.min.css" />
<style>
html, body { background:#ebebeb; font-size:10px; font-family:Verdana; margin:0; padding:0; }
#container { min-width:320px; margin:0px auto 0 auto; background:white; border-radius:0px; padding:0px; overflow:hidden; }
#tree { float:left; min-width:319px; border-right:1px solid silver; overflow:auto; padding:0px 0; }
#data { margin-left:320px; }
#data textarea { margin:0; padding:0; height:100%; width:100%; border:0; background:white; display:block; line-height:18px; }
#data, #code { font: normal normal normal 12px/18px 'Consolas', monospace !important; }
</style>
</head>
<body>
<div id="container" role="main">
<div id="tree"></div>
<div id="data">
<div class="content code" style="display:none;"><textarea id="code" readonly="readonly"></textarea></div>
<div class="content folder" style="display:none;"></div>
<div class="content image" style="display:none; position:relative;"><img src="" alt="" style="display:block; position:absolute; left:50%; top:50%; padding:0; max-height:90%; max-width:90%;" /></div>
<div class="content default" style="text-align:center;">Select a node from the tree.</div>
</div>
</div>
<script src="//static.jstree.com/latest/assets/dist/libs/jquery.js"></script>
<script src="//static.jstree.com/latest/assets/dist/jstree.min.js"></script>
<script>
$(function () {
$(window).resize(function () {
var h = Math.max($(window).height() - 0, 420);
$('#container, #data, #tree, #data .content').height(h).filter('.default').css('lineHeight', h + 'px');
}).resize();
$('#tree')
.jstree({
'core' : {
'data' : {
'url' : './JSON/GetChildren',
'data' : function (node) {
return { 'id' : node.id };
}
},
'force_text' : true,
'check_callback' : true,
'themes' : {
'responsive' : false
}
}
})
.on('changed.jstree', function (e, data) {
if(data && data.selected && data.selected.length) {
$.get('?operation=get_content&id=' + data.selected.join(':'), function (d) {
$('#data .default').text(d.content).show();
});
}
else {
$('#data .content').hide();
$('#data .default').text('Select a file from the tree.').show();
}
});
});
</script>
</body>
</html>
加载时，jsTree 正在请求 ./JSON/GetChildren?id=# 渲染第一级节点，return 是这样的：
我一直在玩 jsTree 网站 (https://www.jstree.com/demo_sitebrowser/index.php) 上的数据库演示。我将它下载到我的服务器上，只是更改了 $.jstree.defaults.core.data.url 并删除了一些侦听器。现在的代码是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="//static.jstree.com/latest/assets/dist/themes/default/style.min.css" />
<style>
html, body { background:#ebebeb; font-size:10px; font-family:Verdana; margin:0; padding:0; }
#container { min-width:320px; margin:0px auto 0 auto; background:white; border-radius:0px; padding:0px; overflow:hidden; }
#tree { float:left; min-width:319px; border-right:1px solid silver; overflow:auto; padding:0px 0; }
#data { margin-left:320px; }
#data textarea { margin:0; padding:0; height:100%; width:100%; border:0; background:white; display:block; line-height:18px; }
#data, #code { font: normal normal normal 12px/18px 'Consolas', monospace !important; }
</style>
</head>
<body>
<div id="container" role="main">
<div id="tree"></div>
<div id="data">
<div class="content code" style="display:none;"><textarea id="code" readonly="readonly"></textarea></div>
<div class="content folder" style="display:none;"></div>
<div class="content image" style="display:none; position:relative;"><img src="" alt="" style="display:block; position:absolute; left:50%; top:50%; padding:0; max-height:90%; max-width:90%;" /></div>
<div class="content default" style="text-align:center;">Select a node from the tree.</div>
</div>
</div>
<script src="//static.jstree.com/latest/assets/dist/libs/jquery.js"></script>
<script src="//static.jstree.com/latest/assets/dist/jstree.min.js"></script>
<script>
$(function () {
$(window).resize(function () {
var h = Math.max($(window).height() - 0, 420);
$('#container, #data, #tree, #data .content').height(h).filter('.default').css('lineHeight', h + 'px');
}).resize();
$('#tree')
.jstree({
'core' : {
'data' : {
'url' : './JSON/GetChildren',
'data' : function (node) {
return { 'id' : node.id };
}
},
'force_text' : true,
'check_callback' : true,
'themes' : {
'responsive' : false
}
}
})
.on('changed.jstree', function (e, data) {
if(data && data.selected && data.selected.length) {
$.get('?operation=get_content&id=' + data.selected.join(':'), function (d) {
$('#data .default').text(d.content).show();
});
}
else {
$('#data .content').hide();
$('#data .default').text('Select a file from the tree.').show();
}
});
});
</script>
</body>
</html>
加载时，jsTree 正在请求 ./JSON/GetChildren?id=# 渲染第一级节点，return 这个：
[
{
"id": 389,
"text": "consequat",
"children": true
},
{
"id": 316,
"text": "orci luctus",
"children": true
},
{
"id": 356,
"text": "tellus non",
"children": true
},
{
"id": 328,
"text": "dictum",
"children": true
},
{
"id": 335,
"text": "auctor ullamcorper",
"children": true
},
{
"id": 355,
"text": "id mollis",
"children": true
},
{
"id": 351,
"text": "Morbi sit",
"children": true
},
{
"id": 358,
"text": "sit",
"children": true
},
{
"id": 391,
"text": "odio Phasellus",
"children": true
},
{
"id": 327,
"text": "nunc",
"children": true
},
{
"id": 346,
"text": "eu",
"children": true
},
{
"id": 386,
"text": "lorem",
"children": true
},
{
"id": 333,
"text": "metus vitae velit",
"children": true
},
{
"id": 367,
"text": "orci Ut",
"children": true
},
{
"id": 336,
"text": "auctor",
"children": true
},
{
"id": 322,
"text": "quis diam Pellentesque",
"children": true
},
{
"id": 303,
"text": "dolor",
"children": true
},
{
"id": 302,
"text": "Aliquam auctor velit",
"children": true
},
{
"id": 304,
"text": "turpis nec",
"children": true
},
{
"id": 349,
"text": "Aliquam",
"children": true
},
{
"id": 382,
"text": "Duis a",
"children": true
},
{
"id": 339,
"text": "euismod mauris",
"children": true
},
{
"id": 310,
"text": "facilisis facilisis magna",
"children": true
},
{
"id": 385,
"text": "cursus",
"children": true
},
{
"id": 345,
"text": "auctor",
"children": true
},
{
"id": 369,
"text": "non hendrerit id",
"children": true
},
{
"id": 330,
"text": "Curabitur consequat lectus",
"children": true
},
{
"id": 320,
"text": "ornare",
"children": true
},
{
"id": 332,
"text": "mauris Suspendisse aliquet",
"children": true
},
{
"id": 365,
"text": "dolor Nulla semper",
"children": true
},
{
"id": 361,
"text": "convallis convallis",
"children": true
},
{
"id": 344,
"text": "enim",
"children": true
},
{
"id": 348,
"text": "quam",
"children": true
},
{
"id": 375,
"text": "nec",
"children": true
},
{
"id": 384,
"text": "ornare",
"children": true
},
{
"id": 342,
"text": "amet ultricies",
"children": true
},
{
"id": 363,
"text": "sociis natoque penatibus",
"children": true
},
{
"id": 326,
"text": "tincidunt neque",
"children": true
},
{
"id": 353,
"text": "ipsum porta elit",
"children": true
},
{
"id": 395,
"text": "pharetra Quisque ac",
"children": true
},
{
"id": 400,
"text": "imperdiet nec",
"children": true
},
{
"id": 352,
"text": "sed turpis",
"children": true
},
{
"id": 381,
"text": "quis accumsan convallis",
"children": true
},
{
"id": 393,
"text": "nisl",
"children": true
},
{
"id": 317,
"text": "volutpat ornare",
"children": true
},
{
"id": 323,
"text": "Sed",
"children": true
},
{
"id": 376,
"text": "arcu",
"children": true
},
{
"id": 315,
"text": "amet ante Vivamus",
"children": true
},
{
"id": 359,
"text": "euismod ac fermentum",
"children": true
},
{
"id": 368,
"text": "gravida non sollicitudin",
"children": true
},
{
"id": 305,
"text": "Aliquam",
"children": true
},
{
"id": 360,
"text": "Integer sem",
"children": true
},
{
"id": 340,
"text": "velit eget",
"children": true
},
{
"id": 341,
"text": "erat semper",
"children": true
},
{
"id": 354,
"text": "lacinia orci consectetuer",
"children": true
},
{
"id": 390,
"text": "ridiculus",
"children": true
},
{
"id": 357,
"text": "lobortis quis",
"children": true
},
{
"id": 301,
"text": "Nullam",
"children": true
},
{
"id": 319,
"text": "Etiam",
"children": true
},
{
"id": 324,
"text": "ut nisi",
"children": true
},
{
"id": 347,
"text": "dictum augue",
"children": true
},
{
"id": 396,
"text": "Quisque ornare",
"children": true
},
{
"id": 325,
"text": "nec mollis vitae",
"children": true
},
{
"id": 364,
"text": "risus Nulla eget",
"children": true
},
{
"id": 337,
"text": "eu ligula Aenean",
"children": true
},
{
"id": 379,
"text": "dis parturient",
"children": true
},
{
"id": 343,
"text": "faucibus orci",
"children": true
},
{
"id": 312,
"text": "imperdiet nec",
"children": true
},
{
"id": 318,
"text": "ipsum sodales",
"children": true
},
{
"id": 338,
"text": "lorem vitae odio",
"children": true
},
{
"id": 397,
"text": "nec mauris blandit",
"children": true
},
{
"id": 374,
"text": "vitae erat Vivamus",
"children": true
},
{
"id": 398,
"text": "elit Curabitur sed",
"children": true
},
{
"id": 308,
"text": "rhoncus Nullam velit",
"children": true
},
{
"id": 388,
"text": "Duis",
"children": true
},
{
"id": 370,
"text": "lorem",
"children": true
},
{
"id": 311,
"text": "id",
"children": true
},
{
"id": 314,
"text": "sit amet",
"children": true
},
{
"id": 383,
"text": "metus In nec",
"children": true
},
{
"id": 394,
"text": "consectetuer ipsum nunc",
"children": true
},
{
"id": 307,
"text": "dui Cum",
"children": true
},
{
"id": 380,
"text": "arcu ac",
"children": true
},
{
"id": 329,
"text": "molestie",
"children": true
},
{
"id": 362,
"text": "posuere enim",
"children": true
}
]
但是，我收到一条 "syntax error" 消息，但我看不到它来自哪里。 JSON 有效，jsTree 加载并请求它，所以发生了什么？
我知道了。问题是 ./JSON/GetChildren?id=# 的 header 没有设置为 application/json。