文章标签 ‘ajax’
20107 月29

buffalo ajax 实现表单提交

前台代码



    
    test
    
    
    



    var endPointTop = '/wi/buffalo';
    var waitingImg = '/wi/images/oa/loading.gif';
    var loadingImg = '/wi/images/oa/loading.gif';
    var userId = 'superadmin';
    var deptId = '0001';
    function test() {
        try {
            var user = Buffalo.Form.formToBean("form1", "modules.sys.Sys_user", true);

            var buffalo = new Buffalo(endPointTop);
            buffalo.remoteCall("desktopService.test", [userId,user], function(reply) {
                var str = reply.getResult();
                alert(str);
            });
        } catch (ex) {
           //   alert(ex);
        }
    }


test



  

id:   name:   age:  memo:  

后台bean

public class User {

    private int id;

    private String name;

    private int age;

    private String memo;

    public User() {

    }
    //结合数据库操作可以添加 rs.getString 、get、set 方法
}

执行类

public class desktopService {
    public int test(String userId, Sys_user obj) {

        return 1;
    }
}

buffalo缺点

实测过程中发现,buffalo实现form表单元素绑定是一对一的,form里包含多余的元素会报错。

20107 月27

buffalo+list+ul+li 实现Ajax多级菜单

Buffalo ajax使用说明

源代码




LeftMenu



    var endPointTop = '/${globals_sys_basename}/buffalo';//globals_sys_basename应用根目录
    var waitingImg = '/${globals_sys_basename}/images/oa/loading.gif';
    var loadingImg = '/${globals_sys_basename}/images/oa/loading.gif';
    var userId = '$!{user.getLoginname()}';
    var deptId = '$!{user.getUnitid()}';
    var alreadyOpenTableId = null;
    var hrefBaseValue = null;
     //HTTP://WWW.WIZZER.CN
     function getUl(e) {
        for (var i = 0; i 0) {
                    var ulElem = document.createElement("ul");

                    var temp = "";
                    ulElem.className = "MenuLevel2";
                    ulElem.ID = "MENU_" + menuId + "S";
                    ulElem.style.display = "";
                    for (var i = 0; i < str.length; i++) {
                        temp += "";
                    }
                    ulElem.innerHTML = temp;
                    e.appendChild(ulElem);
                }
            });
        } catch (ex) {
        }

    }

    function closeMenu() {
        if (alreadyOpenTableId == null) return;
        alreadyOpenTable = document.all(alreadyOpenTableId);
        if (alreadyOpenTable.childNodes.length > 1){
            targetTable = alreadyOpenTable.childNodes[1];
        }else{return;}
        targetTable.style.display = "none";
        alreadyOpenTableId = null;
    }
    function menuClick(e) {
        var currentTableSrc = e;
        if (currentTableSrc.id != alreadyOpenTableId && currentTableSrc.id!=alreadyOpenTableId+"0001") closeMenu();

        targetTableId = currentTableSrc.id + "S";
        if (e.childNodes.length > 1){
            targetTable = e.childNodes[1];
        }else{targetTable=null;}
        if (targetTable == null)return;
        if (targetTable.style.display == "none") {
            targetTable.style.display = '';
            alreadyOpenTableId = currentTableSrc.id;
        } else {
            targetTable.style.display = "none";
        }
    }
 

    


menu.css样式表 

body {
    background: #d8edfc;
    font-size: 12px;
    font-family: 宋体;
    scrollbar-base-color: #dbecf8;
    scrollbar-arrow-color: #2a8ed1;
    scrollbar-track-color: #bdddf2;
    scrollbar-3dlight-color: #2886c5;
    scrollbar-darkshadow-color: #2886c5;
    scrollbar-face-color: #dbecf8;
    scrollbar-shadow-color: #dbecf8;
    margin: 1px;
    border: 3px solid #4891c6;
}

#MenuUl {
    list-style:none;
    margin: 0px;
    padding: 0px;
    background: #d8ebf7;
}

ul.MenuLevel2 {
    list-style:none;
    margin: 0px;
    padding: 0px;
    background: #d8ebf7;
}

.level1 {
    font-weight: bold;
    color: #005790;
    padding-bottom: 1px;

}

.level2 {
    font-weight: normal;
    color: #005790;
}

.level3Head {
    font-weight: normal;
    color: #2479b6;
    width: 100%;
    height: 21px;
    padding-left: 61px;
    padding-top: 4px;
    background: url(images/menu_bg_head.gif) no-repeat;
    cursor: hand;
}

.level33 {
    font-weight: normal;
    color: #2479b6;
    width: 100%;
    height: 21px;
    padding-left: 61px;
    padding-top: 4px;
    background: url(images/menu_bg_3.gif) no-repeat;
    cursor: hand;
}

.level32 {
    font-weight: normal;
    color: #2479b6;
    width: 100%;
    height: 21px;
    padding-left: 61px;
    padding-top: 4px;
    background: url(images/menu_bg_2.gif) no-repeat;
    cursor: hand;
}

.level1Style {
    /*font-size:18px;  */
    width: 155px;
    height: 24px;
    background: url(images/menu_btn_bg.gif) no-repeat;
    padding-left: 20px;
    padding-top: 4px;
    cursor: hand;
}

.level1SelectedStyle {
    width: 155px;
    height: 24px;
    background: url(images/menu_btn_bg_selected.gif) no-repeat;
    padding-left: 20px;
    padding-top: 4px;
    cursor: hand;
}

.level2Style {
    width: 100%;
    height: 20px;
    background: #8ec4e9;
    padding-left: 30px;
    padding-top: 4px;
    border-top: 1px solid #eff6fb;
    cursor: hand;
}
20107 月14

Buffalo ajax实例

Buffalo是国人开发的Ajax框架,它可以使用户在js中方便的调用java代码里的方法。

后台配置方法:

  1. web.xml中配置相关servlet 如下:

            buffalo         net.buffalo.web.servlet.ApplicationServlet    

            buffalo         /buffalo/*    

  1. 需要引入的jar包为:

加入两个jar包:buffalo-2.0.jar和commons-logging-api-1.0.4.jar(下载包里有,下载地址见文章最后)。

注:若commons-logging-api-1.0.4.jar不加入,会抛出异常。

  1. 编写需要调用的业务类。 如:
  2. desktopService.java
    package oa.ajax;

/**

  • Created by IntelliJ IDEA.
  • User: wizzer
  • Date: 2010-7-15
  • Time: 16:08:22
  • To change this template use File | Settings | File Templates. */ public class desktopService { public String getInfoCount(String userId,String depId){

          return "0|1|2";
     }

    }

  1. 配置文件中配置业务类

 配置文件为:buffalo-service.properties  位置在classes下    内容如下:   desktopService=oa.ajax.desktopService    多个类则配置多个: 格式 名称=业务类全名    注意:js里则通过  desktopService来代替oa.ajax.desktopService类执行其中的业务方法    到此后台代码结束

下面为前台调用

  1. 在jsp中引入js文件:prototype.js 和 buffalo.js 文件

     

  1. 编写调用js代码

注意:helloService这个是配置文件中配置的名称

  
      var endPoint = "/buffalo"; 
      var buffalo = new Buffalo(endPoint);   
      var userId= "wizzer";
      var deptId = "HITS";

function getEventCount() {
 try {
  var buffalo = new Buffalo(endPointTop);

         buffalo.remoteCall("desktopService.getInfoCount", [userId, deptId], function(reply) {

                var str = reply.getResult();
             var ary = str.split("|");

    document.getElementById("msg").innerHTML = "(" + ary[0] + ")";
    document.getElementById("mail").innerHTML = "(" + ary[1] + ")";
    document.getElementById("wait").innerHTML = "(" + ary[2] + ")";
         });
 } catch (ex) {
 }
}

   

                 消息

 信箱
 待办
        Buffalo ajax 最新版下载地址:http://buffalo.sourceforge.net/download.html