紧接上篇，jQuery调用jsonp，并且在页面上展示

在上篇中提到了spring4.1+支持jsonp的调用，做了个例子，用来在页面上展示jsonp：
（js写的丑了点，本人后端出生，前端大侠们轻拍~）

var Menu = function () {

    return {
        getMenuData: function (json) {
            console.log(json);
            var data = json.data;
            var html = "";
            for (var i = 0 ; i < data.length ; i ++) {
                var url = data[i].u;
                var name = data[i].n;
                var sub = data[i].i;
                
                html += "";
                html += "<li class='dropdown-submenu'>";
                html += "<a href='" + url + "'>" + name;
                html += "<span class='c-arrow c-toggler'></span>";
                html += "</a>";
                html += "<ul class='dropdown-menu c-pull-right'>";
                
                for (var j = 0 ; j < sub.length ; j ++) {
                    var url = sub[j].u;
                    var name = sub[j].n;
                    var node = sub[j].i;

                    html += "<li class='dropdown-submenu'>";
                    html += "<a href='" + url + "'>" + name;
                    html += "<span class='c-arrow c-toggler'></span>";
                    html += "</a>";
                    
                    html += "<ul class='dropdown-menu c-pull-right'>";
                    for (var k = 0 ; k < node.length ; k ++) {
//                        debugger
                        var name = node[k];
                        var last = name.split("|");
                        
                        html += "<li>";
                        html += "<a href='" + last[0] + "'>" + last[1] + "</a>";
                        html += "</li>";
                    }
                    html += "</ul>";
                    html += "</li>";
                }
                
                html += "</ul>";
                html += "</li>";
                
            }
            $("#itemCatMenu").html(html); 
        },
        
        getJSONP: function (serverUrl, callbackFun) {
            $.ajax({
                type: "get",
                url: serverUrl,
                dataType: "jsonp",
                jsonp: "callback",
                jsonpCallback: callbackFun,
                success: function(json){
//                    console.log(json);
                },
                error: function(e){
                    if (e.status != "200") {
                        console.log(e);
                    }
                }
            });
        }
    };
    
}();

$(document).ready(function()
{
    var serverUrl = "http://localhost:8088/rest/menu/list";
    Menu.getJSONP(serverUrl, "Menu.getMenuData");
});

展示的效果：

尚自习 | 程序员的进阶平台 itzixi.com

微信公众号：BeJavaGod

Java技术交流群