我可以使用以下内容将数据发送到db：
$("#set").click(function ()
{
var cells = graph.getCell();
var StateObject = graph.toJSON();
var SavedState = JSON.stringify(StateObject);
console.log("Here is the state object " + StateObject);
console.log("Here is the saved state: " + SavedState);
$.ajax({
url: 'JsonProcessor.do',type: 'post',dataType: 'json',data: {
test: StateObject
}
});
});
未捕获的错误：图形JSON必须包含单元格数组
$("#get").click(function ()
{
$.ajax({
url: 'JsonProcessor.do',type: 'get',success: function (data) {
var result = data;
console.log("Result from Database: " + result);
graph.fromJSON(result);
}
});
});
我可以看到在chrome控制台中获取的对象如下：[object Object]以及我展开它时
`0: Object JSON_Diagram: "test=%5B%7B%22empID%22%3A%22%22%7D%2C%7B%22cells%22%3A%5B%7B%22type%22%3A%22basic.Rect%22%2C%22position%22%3A%7B%22x%22%3A-2%2C%22y%22%3A33%7D%2C%22size%22%3A%7B%22width%22%3A71%2C%22height%22%3A625%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%22ca4cc8a8-7e95-43cb-a8d3-8cf24c82d43f%22%2C%22z%22%3A1%2C%22embeds%22%3A%5B%22b6aee295-16fa-41e7-b25e-d20610cbd631%22%2C%2288de9a15-cbc8-4c02-a358-30491d50cb37%22%5D%2C%22attrs%22%3A%7B%22rect%22%3A%7B%22fill%22%3A%22%23EEEEEE%22%2C%22stroke%22%3A%22%23008B8B%22%2C%22stroke-width%22%3A2%7D%2C%22.%22%3A%7B%22magnet%22%3Afalse%7D%7D%7D%2C%7B%22type%22%3A%22basic.Circle%22%2C%22size%22%3A%7B%22width%22%3A53%2C%22height%22%3A53%7D%2C%22position%22%3A%7B%22x%22%3A8%2C%22y%22%3A130%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%22b145b765-a60b-4742-82a6-712da89e4dd0%22%2C%22z%22%3A3%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Afalse%7D%2C%22circle1%22%3A%7B%22fill%22%3A%22white%22%2C%22stroke-width%22%3A2%2C%22stroke%22%3A%22green%22%7D%7D%7D%2C%7B%22type%22%3A%22basic.Circle%22%2C%22size%22%3A%7B%22width%22%3A53%2C%22height%22%3A53%7D%2C%22position%22%3A%7B%22x%22%3A8%2C%22y%22%3A225%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%221b99b595-57cd-4127-9ec0-d5842beb183a%22%2C%22z%22%3A4%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Afalse%7D%2C%22circle2%22%3A%7B%22fill%22%3A%22white%22%2C%22stroke%22%3A%22green%22%7D%7D%7D%2C%7B%22type%22%3A%22basic.Circle%22%2C%22size%22%3A%7B%22width%22%3A53%2C%22height%22%3A53%7D%2C%22position%22%3A%7B%22x%22%3A8%2C%22y%22%3A320%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%227e953c11-d361-44d0-bf29-3d3fa146519c%22%2C%22z%22%3A5%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Afalse%7D%2C%22circle3%22%3A%7B%22fill%22%3A%22white%22%2C%22stroke%22%3A%22green%22%7D%7D%7D%2C%7B%22type%22%3A%22basic.Rect%22%2C%22position%22%3A%7B%22x%22%3A35%2C%22y%22%3A505%7D%2C%22size%22%3A%7B%22width%22%3A55%2C%22height%22%3A55%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%22186a6dd7-2b5e-48d6-8e35-ee821ebbb4dc%22%2C%22z%22%3A7%2C%22attrs%22%3A%7B%22rect%22%3A%7B%22fill%22%3A%22%23FFED6B%22%2C%22stroke%22%3A%22%23DBCB62%22%2C%22width%22%3A55%2C%22height%22%3A55%2C%22stroke-width%22%3A1%2C%22transform%22%3A%22rotate(45)%22%7D%2C%22.%22%3A%7B%22magnet%22%3Afalse%7D%7D%7D%2C%7B%22type%22%3A%22basic.Rect%22%2C%22position%22%3A%7B%22x%22%3A10%2C%22y%22%3A50%7D%2C%22size%22%3A%7B%22width%22%3A51%2C%22height%22%3A41%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%22b6aee295-16fa-41e7-b25e-d20610cbd631%22%2C%22z%22%3A9%2C%22parent%22%3A%22ca4cc8a8-7e95-43cb-a8d3-8cf24c82d43f%22%2C%22attrs%22%3A%7B%22rect%22%3A%7B%22fill%22%3A%22%23D6F2FC%22%2C%22stroke%22%3A%22%237E7E7E%22%7D%2C%22.%22%3A%7B%22magnet%22%3Afalse%7D%7D%7D%2C%7B%22type%22%3A%22basic.Rect%22%2C%22position%22%3A%7B%22x%22%3A10%2C%22y%22%3A420%7D%2C%22size%22%3A%7B%22width%22%3A51%2C%22height%22%3A41%7D%2C%22angle%22%3A0%2C%22isInteractive%22%3Afalse%2C%22id%22%3A%2288de9a15-cbc8-4c02-a358-30491d50cb37%22%2C%22z%22%3A12%2C%22parent%22%3A%22ca4cc8a8-7e95-43cb-a8d3-8cf24c82d43f%22%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Afalse%7D%2C%22rectGroup0%22%3A%7B%22fill%22%3A%22white%22%2C%22stroke%22%3A%22%237E7E7E%22%7D%7D%7D%2C%7B%22type%22%3A%22devs.Model%22%2C%22size%22%3A%7B%22width%22%3A751%2C%22height%22%3A170%7D%2C%22inPorts%22%3A%5B%5D%2C%22outPorts%22%3A%5B%5D%2C%22position%22%3A%7B%22x%22%3A160%2C%22y%22%3A123%7D%2C%22angle%22%3A0%2C%22id%22%3A%2237a88170-4da8-464d-99f9-32b72097c495%22%2C%22z%22%3A14%2C%22embeds%22%3A%5B%22e70977f4-52b0-4fdb-a852-8b3b63a5273e%22%5D%2C%22attrs%22%3A%7B%22.label%22%3A%7B%22text%22%3A%22CONTAINER%22%2C%22ref-y%22%3A0.1%2C%22y-alignment%22%3A%22middle%22%7D%2C%22rect%22%3A%7B%22fill%22%3A%22%22%2C%22opacity%22%3A%220.60%22%7D%7D%7D%2C%7B%22type%22%3A%22devs.Model%22%2C%22size%22%3A%7B%22width%22%3A51%2C%22height%22%3A41%7D%2C%22inPorts%22%3A%5B%22%22%5D%2C%22outPorts%22%3A%5B%22%22%5D%2C%22position%22%3A%7B%22x%22%3A234%2C%22y%22%3A187%7D%2C%22angle%22%3A0%2C%22id%22%3A%22e70977f4-52b0-4fdb-a852-8b3b63a5273e%22%2C%22z%22%3A15%2C%22parent%22%3A%2237a88170-4da8-464d-99f9-32b72097c495%22%2C%22attrs%22%3A%7B%22.%22%3A%7B%22magnet%22%3Atrue%7D%2C%22.port-body%22%3A%7B%22r%22%3A3%7D%2C%22.label%22%3A%7B%22text%22%3A%22%22%2C%22ref-x%22%3A0.4%2C%22ref-y%22%3A0.2%7D%2C%22rect%22%3A%7B%22fill%22%3A%22%23D6F2FC%22%2C%22stroke%22%3A%22%237E7E7E%22%7D%2C%22.inPorts+circle%22%3A%7B%22type%22%3A%22input%22%7D%2C%22.outPorts+circle%22%3A%7B%22type%22%3A%22output%22%7D%2C%22.inPorts%3E.port0%3E.port-label%22%3A%7B%22text%22%3A%22%22%7D%2C%22.inPorts%3E.port0%3E.port-body%22%3A%7B%22port%22%3A%7B%22id%22%3A%22in29%22%2C%22type%22%3A%22in%22%7D%7D%2C%22.inPorts%3E.port0%22%3A%7B%22ref%22%3A%22.body%22%2C%22ref-y%22%3A0.5%7D%2C%22.outPorts%3E.port0%3E.port-label%22%3A%7B%22text%22%3A%22%22%7D%2C%22.outPorts%3E.port0%3E.port-body%22%3A%7B%22port%22%3A%7B%22id%22%3A%22out30%22%2C%22type%22%3A%22out%22%7D%7D%2C%22.outPorts%3E.port0%22%3A%7B%22ref%22%3A%22.body%22%2C%22ref-y%22%3A0.5%2C%22ref-dx%22%3A0%7D%7D%7D%5D%7D%5D" __proto__: Object 1: Object 2: Object 3: Object length: 1 __proto__: Array[0]`
但问题是渲染数据以在jointjs中查看
如果有任何人已经解决了,请帮忙.
解决方法
在检索它时,一个名为JSON_Diagram的键被附加到json数组.通过ajax调用发送的Json必须返回图表的精确json才能呈现图表.您需要修复JsonProcessor.do servlet以返回相同的json.希望这可以帮助.