你的位置:首页 > Java教程

[Java教程]紧接上篇,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 //            debugger33             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 });

展示的效果: