关于ajax请求,返回json数据格式
使用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请求时,会失败。