紧接上篇,jQuery调用jsonp,并且在页面上展示
jQuery 调用 页面 展示 并且 jsonp
2023-09-27 14:27:23 时间
在上篇中提到了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 });
展示的效果:
相关文章
- jquery ui datepicker
- 结合jquery的前后端加密解密 适用于WebApi的SQL注入过滤器 Web.config中customErrors异常信息配置 ife2018 零基础学院 day 4 ife2018 零基础学院 day 3 ife 零基础学院 day 2 ife 零基础学院 day 1 - 我为什么想学前端
- 一个简单的QQ隐藏图生成算法 通过jQuery和C#分别实现对.NET Core Web Api的访问以及文件上传
- jQuery碎语(2) 事件
- Android+Jquery Mobile学习系列(6)-个人信息设置
- jquery easyui textbox onblur事件,textbox blur事件无效解决方案
- 如何用jquery获取input输入框中的值?
- FullCalendar – jQuery Event Calendar in ASP.NET
- jQuery:mouseover and Increase the Size of an Image
- jQuery的on绑定事件在mobile safari(iphone / ipad / ipod)上无法使用的解决方案
- 如何使用jquery在页面动画显示 加载中效果
- Jquery 判断浏览器类型