在当今技术发展日益成熟，人们除了追求技术创新与发展外，更多也关注到了与用户交互的便利性方面上。当程序员还在为前后数据交互刷新问题困惑时，AJAX 问世了，它以方便快捷的优越性博得了广大程序员的追捧。经过几年的发展，它也渐渐成为我们开发中必不可少的一件利器，下面我就来讲个Struts1 + Ajax的登录示例。
所用的JS插件： JQuery1.3.2汉化版、JQuery.form2.43
下面我们先来看看页面中核心的JS代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
function submitForm()
{
// 用jquery.form插件实现对表单数据系列化
var form = $("form[name=AdminLoginForm]");
// 配置jquery.form中ajaxForm的参数
// success 操作成功时的回调函数
// resetForm 是否刷新表单
// dataType 接收服务器返回数据的类型, 有script, xml, json等
var options = {
success: showResponse,
resetForm: false,
dataType: "script"
};
// ajax发送表单数据到服务器
form.ajaxForm(options);
return false;
}
//回调函数
function showResponse(responseText, statusText) {
if (statusText == "success")
{
alert(responseText);
}
else
{
alert("由于通讯问题，请稍后再登录！");
}
}
|
在上面的代码中我们可以发现通过JQuery和JQuery.form两款插件，我们只要短短的三行代码就可以实现与后台的数据交互。JQuery是一款功能很强大的JS插件，我个人也很喜欢，调用很方便，代码风格也不错。有空可以研究一下哦，呵呵……
下面继续来看看struts的action的代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
// 输出的方式与编码格式
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
// 获取表单数据
AdminLoginForm adminLogin = (AdminLoginForm) form;
// 获取服务器产生的验证码
String validateCode = request.getSession().getAttribute("validateCode").toString();
try {
// 判断用户输入的验证码是否正确
if (adminLogin.getVerifycode().equalsIgnoreCase(validateCode)) {
// 用户名的状态
boolean isUser = false;
// 验证用户名是否存在
if(!adminLogin.getUsername().equalsIgnoreCase("elkan")){
out.print("你输入的用户名不存在，请重新输入！");
return null;
}else{
isUser = true;
}
// 验证密码是否正解
if(adminLogin.getUserpswd().equalsIgnoreCase("lisenhui2010") && isUser){
out.print("登录成功！");
}else{
out.print("密码错误，请重新输入！");
return null;
}
} else {
out.print("验证码输入错误请重新输入！");
return null;
}
} catch (Exception e) {
out.print(e.toString());
}
return null;
}
|
最后还有下面的struts-config.xml的配置文件：
1
2
3
4
5
6
7
8
9
10
11
12
|
<action-mappings>
<action
input="/webstage/adminLogin.jsp"
name="AdminLoginForm"
path="/AdminLogin"
scope="request"
type="com.elkan.struts.actions.AdminLogin"
validate="false"/>
</action-mappings>
|
说了那么多，下面先来看看通上面的代码所实现的效果吧：
看到上面的效果，你是不是也想展示一下自己的身手呢，那就赶紧动手吧，相信有了上面的那些代码的提示做个DEMO应该不会很难吧，如果有什么问题的话可以留言给我。谢谢支持。
