JQuery表单异步提交及菜单实现

我这回做的综合设计由于前台部分使用了“Jquery UI”所以少不了通过Ajax与后台进行交互的部分,对于只擅长后台代码编写的我来说,确实是一种挑战。

查了下资料,发现JQuery提交表单并不是什么难事,只需要通过$.ajax()方法就可以,下面给出一个例子,使用POST的方法将用户名密码提交给Login.action:

[codesyntax lang="javascript"]

	$.ajax({
		type:"POST",
		url:"Login.action",
		data:{username:$username.val(),password:$password.val()},
		dataType:'json',
		success:function(data){
			if(data.status=='SUCCESS'){
				/*登录成功进行跳转*/
				location.href='index.jsp';
			}else{
				/*登录失败操作*/
			}
		}
	});

[/codesyntax]

在上面的代码中,我们使用type指定了提交表单的方式,使用url指定了后台处理表单的页面,使用data来附加需要提交的参数,使用dataType指定了返回值的格式,而success则表明如果提交成功(请注意这里仅仅是提交成功,也就是说服务器返回Code200而已)则执行的代码,在这里我们写了一个方法,其中data是服务器返回来的JSON对象。

有了JSON对象,我们如果需要取出其中的某些值,也仅仅需要使用“点分号”来取出需要的值。例如“data.status”即可取出status字段的值。

而在后台构建JSON对象也确实是一件很有意思的事情,这里由于我的菜单只有两处,故仅仅使用了两个类来分别表明其所处的位置。类关系图如下所示。这样,我们仅需要创建一个ParentMenu的ArrayList,并将这个List进行JSON序列化,便可以得到两层的菜单结构 :)

之前对JavaScript以及JQuery这些东西都有畏惧之心,这不现在硬着头皮啃了啃,原来也并不是多难的东西,嘿嘿,别人是会什么用什么,Kaisir我是用什么会什么!!哈!


2 条评论

  1. 望川念鱼说道:

    你现在的涉猎的技术明摆着不让我们学啊。。。

发表评论

(必填)

(必填)

(以便回访)