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

展示的效果:

 

相关文章
|
6月前
|
JavaScript 前端开发
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
53 0
|
6月前
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
52 0
|
7月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
36 0
|
8月前
|
JSON JavaScript 数据格式
jQuery操作页面元素属性和内容
jQuery操作页面元素属性和内容
40 0
|
7月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
54 0
|
5月前
|
JavaScript 前端开发 Python
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
五分钟学 | Flask 使用 JQuery 上传数据并展示在页面上
|
6月前
|
JavaScript
jQuery带参数跳转,新页面获取url的参数id
jQuery带参数跳转,新页面获取url的参数id
27 0
|
6月前
|
移动开发 JSON JavaScript
七个帮助你处理Web页面层布局的jQuery插件
七个帮助你处理Web页面层布局的jQuery插件
47 0
|
8月前
|
JavaScript 前端开发
jQuery 页面顶部滚动中固定导航栏
jQuery 页面顶部滚动中固定导航栏
25 0
|
JavaScript 前端开发 容器
JQuery javascript实现父子页面相互调用
JQuery javascript实现父子页面相互调用
80 0