Gooflow是一個(gè)基于HTML5 Canvas實(shí)現(xiàn)的流程圖繪制工具，它使用JSON格式進(jìn)行數(shù)據(jù)傳輸和存儲(chǔ)。這篇文章將介紹如何傳輸JSON格式的數(shù)據(jù)。

JSON是一種輕量級(jí)的數(shù)據(jù)交換格式，具有易于讀寫(xiě)和解析的特性。在Gooflow中，每個(gè)流程圖都會(huì)被存儲(chǔ)為一個(gè)JSON對(duì)象，并且可以通過(guò)Ajax請(qǐng)求來(lái)傳輸。

{"nodes":[{"id":"node1","left":20,"top":20,"type":"start","text":"開(kāi)始"},{"id":"node2","left":100,"top":100,"type":"node","text":"流程節(jié)點(diǎn)"}],"lines":[{"id":"line1","type":"sl","from":"node1","to":"node2"}]}

在上面的JSON對(duì)象中，nodes代表節(jié)點(diǎn)，lines代表連接線(xiàn)。每個(gè)節(jié)點(diǎn)都有一個(gè)唯一的id、left和top表示坐標(biāo)位置，type代表節(jié)點(diǎn)類(lèi)型，text代表節(jié)點(diǎn)文本。

{"id":"node1","left":20,"top":20,"type":"start","text":"開(kāi)始"}

連接線(xiàn)包括id、type、from、to。id為唯一標(biāo)識(shí)，type表示連接線(xiàn)的類(lèi)型，一般有sl、tb、lr等類(lèi)型；from和to表示連接線(xiàn)的起點(diǎn)和終點(diǎn)，分別為節(jié)點(diǎn)的ID。

{"id":"line1","type":"sl","from":"node1","to":"node2"}

在傳輸JSON格式數(shù)據(jù)時(shí)，需要把JSON對(duì)象轉(zhuǎn)換為字符串，并設(shè)置Content-Type為application/json，以便在服務(wù)器端正確解析數(shù)據(jù)。

$.ajax({
type: "POST",
url: "/save",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(jsonData),
success: function(msg) {
alert("保存成功！");
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("保存失敗！");
}
});

通過(guò)這樣的方式，我們可以輕松地傳輸和存儲(chǔ)Gooflow流程圖數(shù)據(jù)。