ajax | Wizzer's Blog

文章标签 ‘ajax’

20107 月29

前台代码

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

20107 月27

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

编程学习 ajax, Buffalo 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;
}

20107 月14

Buffalo ajax实例

编程学习 ajax, Buffalo 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 文件

注意：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

Wizzer's Blog

buffalo ajax 实现表单提交

前台代码

后台bean

执行类

buffalo缺点

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

源代码

menu.css样式表

Buffalo ajax实例

后台配置方法：

下面为前台调用

最新文章

最新评论

文章分类

文章归档