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我是用什么会什么!!哈!

数据库课程设计之UI制作总结(一)

数据库要进行课程设计,为期两周的时间,真是难得的两周什么都不用做可以完全关注与程序。这次的课程设计我打算使用Java+MySQL来把Kaisir的部落格写出来,之后再一点点的进行完善,我想这个完善的过程,也便是自己进步的过程 :)

今天用了一段时间来完成了首页UI的一大部分,样子如上图所示,嘿嘿,是不是跟现在的部落格样子很像?其实就是模拟着现在的部落格样子来的,不过却是自己一行行代码手敲出来的,而且使用了很多方法来尽可能的使新的部落格兼容更多的浏览器,就目前看来,FF5&IE7-9看起来都没有问题嘿嘿。

好,接下来我就对其中的一些问题做一些总结,已被后来查阅。

1)怎样将两个含有float属性的层完全共存?
在层与层之间插入
[codesyntax lang=”html4strict”]

<div style="clear:both;"></div>

[/codesyntax]
通过这个,可以消除之前的float属性的影响。

2)如何使用CSS完成垂直居中?
这个有两种方法,不过都不是很完美:
第一种方法让padding-top与padding-bottom都使用相同的值。(支持所有元素)
第二种方法让line-height与height的值相等,并设置overflower为hidden;(仅支持文本)

3)如果发现FF与IE显示的不同,如何进行调整?
可 以使用一些”Hack” 例如仅有IE识别“<!–[if IE]><![endif]–>”标签,故可以单独写一个针对IE的补充CSS,用刚刚提到的标签引入这个CSS即可,当然,还有一 些特殊的Hack,比如只有IE6识别Css中使用下划线,例如“color:red;_color:green;”则在IE6中显示为绿色,其他为红色 :)

4)如何定义分割线?
分割线的html代码为<hr> 常见的定义无非就是去除阴影:noshade=”noshade”,线宽:size=xx

5)如何实现鼠标滑过按钮?
比我想象的简单的多
[codesyntax lang=”css”]

div#nav a:hover{
	background-color:#999;
	display:block;
	}

[/codesyntax]

这样就行啦 :)