mootools实现重用ajax提交方式

例如:

js 对象: data 包含(field1,field2,field3....)

java 对象 PO 也包含 field1,field2,field3.....

这两个对象属性不一定完全一致, 但是你希望他们一致的地方能直接通过ajax 请求到servlet时,直接自动转换,

不需要人为的去

request.getParameter("field1")

然后一个一个的去赋值.

那么利用mootools 你可以很灵巧的扩展出你自己所需求的js 类库

声明: 本文没有什么创新,没有什么深奥的技术, 有的只是一颗追求简单的心. 如果你也想把你代码从10行缩短到5行,

那么你可以试试.

  • 首要工作:

1. js 用上了mootools

2. java后台用上了org.apache.commons.beanutils 包

那么现在开始吧:

  • 第一步: 

定制自己的servlet 提交类库

Servlet = new Class({
            data : {},
            responseCall : null,
            initialize : function(forward) {
                if(forward){
                    this.data.forward = forward;//这个forward用来转发,如果你的单个servlet就
                                //一个业务的话,这里留空就行
                                 }
                this.data.random = Math.random();//这里用了随机数,其实加不加都行
            },
            submit : function(url) {
                var _responseCall = this.responseCall;
                new Request.JSON({
                            url : url,
                            onComplete : function(responseJson, text) {
                                if (responseJson.status == "fail") {
                                    alert(responseJson.message);
                                    return;
                                }各种路由器设置图解
                                if (_responseCall) {//如果设置了提交成功的回调
                                    _responseCall(responseJson, text);
                                }

                            },
                            failure : function() {
                                alert("Error Post Servlet : " + url);
                            }
                        }).post(this.data);
            }

        });

你是不是发现没有 field1=**&field2=*&field3=... 这种提交方式,那是用了mootools 的json提交 , mootools 类库比不上jquery丰富 但是它在定制自己的js扩展框架那块, 确实jquery比不上的.因为他的语法借鉴的就是java 的oo思想

  • 第二步:

开始利用自己写的servlet ajax类库来封装数据

var sv = new Servlet("add");//forward转发,如果servlet 没有其他业务则留空
        sv.data.elementID1= $('elementID1').value;
        sv.data.elementID2= $('elementID2').value;
        sv.data.elementID3= $('elementID3').value;
                sv.data.***** = ....... // 灵活的对象赋值方式内陆运输
         sv.responseCall = addinvResponse;
        sv.submit(url);
       
       
        function addinvResponse(json,text){
            alert("添加成功");
        }

是不是特别像java 的对象声明语法啊.  呵呵, 好戏在后面.

  • 第三步:

这里就到java servlet 了. 看看如何封装js提交的数据的.

首先:

request.getParameter("forward")

你是不是设置了转发

如果设置了

if (forward.equals("add")) {
            addClass(request, response);
        }

那好:  看addClass方法

MyClass inv = new MyClass();
        inv = (MyClass) ParseRequestUtils.parseRequest(request, inv);//数据封装

难道这个inv 对象就包含了. js 中设置 field1 ,field2 ,field3的值了么?

是滴, 你懂得

那么来看看 这个ParseRequestUtils.parseRequest又是何方神圣.

public static Object parseRequest(HttpServletRequest request, Object bean) {
        // 取得所有参数列表
        Enumeration enumObj = request.getParameterNames();
        // 遍历所有参数列表
        while (enumObj.hasMoreElements()) {

            Object obj = enumObj.nextElement();
            try {
                // 取得这个参数在Bean中的数据类开
                Class cls = PropertyUtils.getPropertyType(bean, obj.toString());
                if(cls==null){
                    continue;
                }
                // 把相应的数据转换成对应的数据类型
                Object beanValue = ConvertUtils.convert(request
                        .getParameter(obj.toString()), cls);
                // 添冲Bean值
                PropertyUtils.setProperty(bean, obj.toString(), beanValue);
            } catch (IllegalAccessException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (InvocationTargetException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (NoSuchMethodException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }

        return bean;
    }

哦, 到这里算是看明白了. 不就是把提交的request请求的参数一个个对应类型放入java 对象了中了么.

是滴.是这样的. 如果你们有更简单的方法,望赐教!

  • 第四步:

还等啥? 操作吧

service.insertMyClass(inv);

posted @ 2011-08-02 10:38  ctou45  阅读(251)  评论(0编辑  收藏  举报