使用servlet測試
后台數據為:返回類型沒有設置(方式一)
1 String str = "["+ 2 "{ id:1, pId:0, name:\"可折騰的父節點 1\", t:\"我很普通,隨便 展開/折疊 我吧\", open:false},"+ 3 "{ id:11, pId:1, name:\"葉子節點 - 1\", t:\"我老爸很普通,隨便折騰他吧\"},"+ 4 "{ id:12, pId:1, name:\"可折騰的父節點 2\", t:\"我和我老爸都很普通,隨便折騰我和他吧\", open: false},"+ 5 "{ id:121, pId:12, name:\"父節點 - 121\", t:\"我老爸很普通,隨便折騰他吧\", open:true},"+ 6 "{ id:1211, pId:121, name:\"父節點 - 1211\", t:\"我老爸很普通,隨便折騰他吧\", open:false},"+ 7 "{ id:1212, pId:1211, name:\"葉子節點 - 1212\", t:\"我老爸很普通,隨便折騰他吧\"},"+ 8 "{ id:1213, pId:121, name:\"父節點 - 1213\", t:\"我老爸很普通,隨便折騰他吧\", open:false},"+ 9 "{ id:1214, pId:1213, name:\"葉子節點 - 1214\", t:\"我老爸很普通,隨便折騰他吧\"},"+ 10 "{ id:123, pId:12, name:\"葉子節點 - 23\", t:\"我老爸很普通,隨便折騰他吧\"},"+ 11 "{ id:13, pId:1, name:\"葉子節點 - 3\", t:\"我老爸很普通,隨便折騰他吧\"},"+ 12 "{ id:2, pId:1, name:\"無法折疊的父節點\", t:\"休想讓我折疊起來...除非你用 expandAll 方法\", open:false, collapse:false},"+ 13 "{ id:21, pId:2, name:\"葉子節點2 - 1\", t:\"哈哈哈,我老爸NB吧,不能折疊吧?\"},"+ 14 "{ id:22, pId:21, name:\"葉子節點2 - 2\", t:\"哈哈哈,我老爸NB吧,不能折疊吧?\"},"+ 15 "{ id:23, pId:21, name:\"葉子節點2 - 3\", t:\"哈哈哈,我老爸NB吧,不能折疊吧?\"},"+ 16 "{ id:3, pId:2, name:\"無法展開的父節點\", t:\"就憑你也想展開我?難呀...嘿嘿, 除非你用 expandAll 方法\", open:false, expand:true},"+ 17 "{ id:31, pId:3, name:\"葉子節點3 - 1\", t:\"居然讓你看到了...莫非你用了全部節點展開?\"},"+ 18 "{ id:32, pId:31, name:\"葉子節點3 - 2\", t:\"居然讓你看到了...莫非你用了全部節點展開?\"},"+ 19 "{ id:33, pId:31, name:\"葉子節點3 - 3\", t:\"居然讓你看到了...莫非你用了全部節點展開?\"},"+ 20 "{ id:4, pId:3, name:\"空空的父節點 1\", t:\"一無所有...除了我自己\", isParent:true, open:false}"+ 21 "]";
前端使用$.post接收,沒有問題,能夠加載出樹結構
1 $.POST('/TestServlet',{},function(data){ 2 var nodes = eval("("+data+")"); 3 $.fn.zTree.init($("#tree"), setting, nodes); 4 });
使用ajax接收,配置呢type為json,會提示加載失敗
1 $.ajax({ 2 type: "POST", 3 url: '/TestServlet', 4 timeout: 1000, 5 data: { 6 key1: "value1", 7 key2: "value2" 8 }, 9 async: true, 10 dataType: "json", 11 error: function(){ 12 alert("請求失敗!"); 13 }, 14 success: function(data){ 15 treeObj = $.fn.zTree.init($("#tree"), setting, data); 16 } 17 });
見后端的字符串修改:鍵上加了引號(方式二)
1 String str = "["+ 2 "{ \"id\":1, \"pId\":0, \"name\":\"可折騰的父節點 1\", \"t\":\"我很普通,隨便 展開/折疊 我吧\", \"open\":true},"+ 3 "{ \"id\":11, \"pId\":1, \"name\":\"葉子節點 - 1\", \"t\":\"我老爸很普通,隨便折騰他吧\"},"+ 4 "{ \"id\":12, \"pId\":1, \"name\":\"可折騰的父節點 2\", \"t\":\"我和我老爸都很普通,隨便折騰我和他吧\", \"open\": false},"+ 5 "{ \"id\":121, \"pId\":12, \"name\":\"父節點 - 121\", \"t\":\"我老爸很普通,隨便折騰他吧\", \"open\":true},"+ 6 "{ \"id\":1211, \"pId\":121, \"name\":\"父節點 - 1211\", \"t\":\"我老爸很普通,隨便折騰他吧\", \"open\":false},"+ 7 "{ \"id\":1212, \"pId\":1211, \"name\":\"葉子節點 - 1212\", \"t\":\"我老爸很普通,隨便折騰他吧\"},"+ 8 "{ \"id\":1213, \"pId\":121, \"name\":\"父節點 - 1213\", \"t\":\"我老爸很普通,隨便折騰他吧\", \"open\":false},"+ 9 "{ \"id\":1214, \"pId\":1213, \"name\":\"葉子節點 - 1214\", \"t\":\"我老爸很普通,隨便折騰他吧\"},"+ 10 "{ \"id\":123, \"pId\":12, \"name\":\"葉子節點 - 23\", \"t\":\"我老爸很普通,隨便折騰他吧\"},"+ 11 "{ \"id\":13, \"pId\":1, \"name\":\"葉子節點 - 3\", \"t\":\"我老爸很普通,隨便折騰他吧\"},"+ 12 "{ \"id\":2, \"pId\":1, \"name\":\"無法折疊的父節點\", \"t\":\"休想讓我折疊起來...除非你用 openAll 方法\", \"open\":false, \"collapse\":false},"+ 13 "{ \"id\":21, \"pId\":2, \"name\":\"葉子節點2 - 1\", \"t\":\"哈哈哈,我老爸NB吧,不能折疊吧?\"},"+ 14 "{ \"id\":22, \"pId\":21, \"name\":\"葉子節點2 - 2\", \"t\":\"哈哈哈,我老爸NB吧,不能折疊吧?\"},"+ 15 "{ \"id\":23, \"pId\":21, \"name\":\"葉子節點2 - 3\", \"t\":\"哈哈哈,我老爸NB吧,不能折疊吧?\"},"+ 16 "{ \"id\":3, \"pId\":2, \"name\":\"無法展開的父節點\", \"t\":\"就憑你也想展開我?難呀...嘿嘿, 除非你用 openAll 方法\", \"open\":false, \"expand\":true},"+ 17 "{ \"id\":31, \"pId\":3, \"name\":\"葉子節點3 - 1\", \"t\":\"居然讓你看到了...莫非你用了全部節點展開?\"},"+ 18 "{ \"id\":32, \"pId\":31, \"name\":\"葉子節點3 - 2\", \"t\":\"居然讓你看到了...莫非你用了全部節點展開?\"},"+ 19 "{ \"id\":33, \"pId\":31, \"name\":\"葉子節點3 - 3\", \"t\":\"居然讓你看到了...莫非你用了全部節點展開?\"},"+ 20 "{ \"id\":4, \"pId\":3, \"name\":\"空空的父節點 1\", \"t\":\"一無所有...除了我自己\", \"isParent\":true, \"open\":false}"+ 21 "]";
且設置返回值類型:
response.setContentType("application/json; charset=utf-8");
就可以使用ajax設置type為json接收數據。
注意:后台設置json格式返回時,鍵上要加引號。如果鍵上沒加引號,但是又設置呢返回值為json,通過瀏覽器,可以正常加載出數據,但是在使用ajax請求時,會失敗。