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

简介: 在上篇中提到了spring4.1+支持jsonp的调用,做了个例子,用来在页面上展示jsonp: (js写的丑了点,本人后端出生,前端大侠们轻拍~) 1 var Menu = function () { 2 3 return { 4 getMenuData: function (json) { 5 console.

上篇中提到了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 });

展示的效果:

 

相关文章
|
JavaScript 前端开发
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
93 0
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
92 0
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
65 0
|
JSON JavaScript 数据格式
jQuery操作页面元素属性和内容
jQuery操作页面元素属性和内容
58 0
|
2月前
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
26 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
2月前
|
Web App开发 JavaScript iOS开发
基于jquery开源的页面内模拟滚动条特效插件scrollbar
abcrollBar是一个基于jquery运行的开源滚动条特效插件,体积小巧使用简单的滚动条小插件,它可以通过鼠标中轴滑动页面内的模拟滚动条,或鼠标拖动滚动条查看滚动框架里的内容。支持自定义滚动条的样式,滚动条可选择横或竖呈现,默认也可选择显示或隐藏滚动条。
28 0
|
5月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
43 2
|
6月前
|
移动开发 开发框架 JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
|
5月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
36 0
|
6月前
|
移动开发 JSON JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)