紧接上篇,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 });

展示的效果:

原文地址:https://www.cnblogs.com/leechenxiang/p/5433276.html