文章标签 ‘ajax’
2010七月29

buffalo ajax 实现表单提交

编程学习 , , 0 Comments

前台代码

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <title>test</title>
    <LINK href="/wi/css/oa/blue/menu.css" type=text/css media=screen rel=stylesheet>
    <script language="javascript" src="/wi/script/prototype.js"></script>
    <script language="javascript" src="/wi/script/buffalo.js"></script>

</head>
<script language="javascript">
    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);
        }
    }
</script>
<body style="margin: 0; padding: 0; overflow: auto; " marginwidth="0" topmargin="0" leftmargin="0" marginheight="0">
<a href="#" onclick="test();">test</a>

<form id ="form1">

  <p>id：<input name="id" type="text" id="id">

  name：<input name="name" type="text" id="name">

  age: <input name="age" type="text" id="age">

 memo: <input name="memo" type="text" id="memo">

  </p>

</form>

</body>
</html>

后台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里包含多余的元素会报错。

2010七月27

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

编程学习 , 0 Comments

Buffalo ajax使用说明

源代码

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>LeftMenu</title>
<LINK href="css/menu.css" type=text/css  media=screen rel=stylesheet>
<script language="javascript" src="script/prototype.js"></script>
<script language="javascript" src="script/buffalo.js"></script>
</head>
<script language="javascript">
    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 < e.childNodes.length; i ++) {
            if (e.childNodes[i].nodeName.toUpperCase() == "UL")return true;
        }
        return false;
    }
    function subMenu(e, menuId) {//动态增加下级菜单
        if (getUl(e))return;
        try {
            var buffalo = new Buffalo(endPointTop);
            buffalo.remoteCall("desktopService.getSubMenu", [userId,menuId], function(reply) {
            //desktopService.getSubMenu ajax调用后台方法，传递用户名、一级栏目ID
                var str = reply.getResult();//返回ArrayList对象或List对象
                if (str.length>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 += "<li id='MENU_"+str[i].id+"' class='level2' onclick=\"subMenu(this,'" + str[i].id + "');menuClick(this);\" ><div>";
                        if (str[i].ext3 != null && str[i].ext3 != "") {
                            temp += "<img src='/$!globals_sys_basename/private/Icons/" + str[i].ext3 + "'>";//小图标
                        }
                        temp += "" + str[i].name + "</div></li>";
                    }
                    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";
        }
    }
 </script>
<body style="margin: 0; padding: 0; overflow: auto; " marginwidth="0" topmargin="0" leftmargin="0" marginheight="0">

    <ul id=MenuUl>

      #foreach($obj in $list)//使用模板语言循环出第一级菜单

    <li  id="MENU_$!{obj.getId()}" onclick="subMenu(this,'$!{obj.getId()}');menuClick(this);"><div>#if(${obj.getExt3()})<img src="/$!globals_sys_basename/private/Icons/$!{obj.ext3}">#end $!{obj.getName()}</div>

    </li>

    #end
        </ul>

</body>
</html>

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;
}
2010七月14

Buffalo ajax实例

编程学习 , 0 Comments

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

后台配置方法：

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

<!–buffalo ajax–>
    <servlet>
        <servlet-name>buffalo</servlet-name>
        <servlet-class>net.buffalo.web.servlet.ApplicationServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>buffalo</servlet-name>
        <url-pattern>/buffalo/*</url-pattern>
    </servlet-mapping>

2. 需要引入的jar包为：

加入两个jar包：buffalo-2.0.jar和commons-logging-api-1.0.4.jar（下载包里有，下载地址见文章最后）。

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

3. 编写需要调用的业务类。
如：
1. 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";
        }
}

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

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

下面为前台调用

5. 在jsp中引入js文件：prototype.js 和 buffalo.js 文件

 <script type=”text/javascript” src=”js/prototype.js”></script>
 <script type=”text/javascript” src=”js/buffalo.js”></script>
 
6. 编写调用js代码

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

<script type="text/javascript">  
      var endPoint = "<%=request.getContextPath()%>/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) {
 }
}

</script>

    
    <input type=”button” value=”Buffalo远程调用” onclick=”getEventCount();”/>
   
    消息<div id=”msg”></div>
 信箱<div id=”mail”></div>
 待办<div id=”wait”></div>
   
   
Buffalo ajax 最新版下载地址：http://buffalo.sourceforge.net/download.html

联系方式

分类目录

文章归档

热门标签

2012 A11 activiti ajax Android budwk C# CDMA CMNET CSS DIV FLASH GPS IN语 iphone iphone4 IT JAVA JS M8 M9 MP4 MySQL nginx nodejs nutz nutzwk PHP QQ sails WM wordpress 军事 固件 安徽 插件 教程 源代码 源码 爱 电影 程序员 经纬度 腾讯 魅族

近期评论

Links

打赏 Reward