紧接上篇，jQuery调用jsonp，并且在页面上展示
在上篇中提到了spring4.1+支持jsonp的调用，做了个例子，用来在页面上展示jsonp：
（js写的丑了点，本人后端出生，前端大侠们轻拍~）
1 var Menu = function () { 2 3 return { 4 getMenuData: function (json) { 5 console.log(json); 6 var data = json.data; 7 var html = ""; 8 for (var i = 0 ; i < data.length ; i ++) { 9 var url = data[i].u; 10 var name = data[i].n; 11 var sub = data[i].i; 12 13 html += ""; 14 html += "<li class='dropdown-submenu'>"; 15 html += "<a href='" + url + "'>" + name; 16 html += "<span class='c-arrow c-toggler'></span>"; 17 html += "</a>"; 18 html += "<ul class='dropdown-menu c-pull-right'>"; 19 20 for (var j = 0 ; j < sub.length ; j ++) { 21 var url = sub[j].u; 22 var name = sub[j].n; 23 var node = sub[j].i; 24 25 html += "<li class='dropdown-submenu'>"; 26 html += "<a href='" + url + "'>" + name; 27 html += "<span class='c-arrow c-toggler'></span>"; 28 html += "</a>"; 29 30 html += "<ul class='dropdown-menu c-pull-right'>"; 31 for (var k = 0 ; k < node.length ; k ++) { 32 // debugger 33 var name = node[k]; 34 var last = name.split("|"); 35 36 html += "<li>"; 37 html += "<a href='" + last[0] + "'>" + last[1] + "</a>"; 38 html += "</li>"; 39 } 40 html += "</ul>"; 41 html += "</li>"; 42 } 43 44 html += "</ul>"; 45 html += "</li>"; 46 47 } 48 $("#itemCatMenu").html(html); 49 }, 50 51 getJSONP: function (serverUrl, callbackFun) { 52 $.ajax({ 53 type: "get", 54 url: serverUrl, 55 dataType: "jsonp", 56 jsonp: "callback", 57 jsonpCallback: callbackFun, 58 success: function(json){ 59 // console.log(json); 60 }, 61 error: function(e){ 62 if (e.status != "200") { 63 console.log(e); 64 } 65 } 66 }); 67 } 68 }; 69 70 }(); 71 72 $(document).ready(function() 73 { 74 var serverUrl = "http://localhost:8088/rest/menu/list"; 75 Menu.getJSONP(serverUrl, "Menu.getMenuData"); 76 });
展示的效果：
