紧接上篇,jQuery调用jsonp,并且在页面上展示
2016-04-25 23:35
405 查看
在上篇中提到了spring4.1+支持jsonp的调用,做了个例子,用来在页面上展示jsonp:
(js写的丑了点,本人后端出生,前端大侠们轻拍~)
展示的效果:
(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"); });
展示的效果:
相关文章推荐
- 用jQuery来做简单的菜单栏的收缩
- 一篇很不错的介绍jquery的上下文的文章
- 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
- jquery对原生方法的使用
- [jQuery] 事件 方法
- 放弃jQuery,使用原生js吧!
- JavaScript和jquery中的宽度
- jQuery源码解析(架构与依赖模块)笔记一
- jquery和amd规范
- jQuery comet
- vs中正常IIS发布网站后css样式、图片丢失jQuery报错 $ is not defined
- 简单的jQuery动态得到下拉框的值
- jQuery获取Select选择的Text和 Value(转)
- jQuery取得select选中的值
- jquery控制css的display(控制元素的显示与隐藏)
- jQuery的封装方式与JS中new的实现原理
- js随笔,css和js禁止网页选择文本,table的class样式使得td的class样式失效,jquery获得元素坐标
- jquery截取、判断字符串的长度,中英文都可
- jQuery中的ajax
- Jquery获取cookies