zoukankan      html  css  js  c++  java
  • 紧接上篇,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 });

    展示的效果:

  • 相关阅读:
    .NET实现Excel文件的读写 未测试
    权限管理设计
    struts1中配置应用
    POJ 2139 Six Degrees of Cowvin Bacon(floyd)
    POJ 1751 Highways
    POJ 1698 Alice's Chance
    POJ 1018 Communication System
    POJ 1050 To the Max
    POJ 1002 4873279
    POJ 3084 Panic Room
  • 原文地址:https://www.cnblogs.com/leechenxiang/p/5433276.html
Copyright © 2011-2022 走看看