日期:2014-05-16  浏览次数:20591 次

借助mootools 快速开发一个重用 ajax 提交方式

?

做web 程序的你,是不是经常会遇到url提交, 请求呢.

?

之间会不会遇到 很多需要修改页面表单域和后台po的对应呢.

?

你是不是想使用java 语法的方式.来写ajax 提交. 并且实现js 对象到 java 对象的一站式映射呢

?

例如:

?

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.printStackTr