用Struts2、Jquery和Json实现用户登录。重点在如下两个地方：
(1)Struts2与JSON集成的配置
(2)Jquery处理JSON返回的数据
首先到以下网址http://code.google.com/p/jsonplugin/downloads/list下载JSON插件的JAR包，并将其加入到/WEB-INF/lib下。
1、Struts.xml 文件
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="struts2_login" extends="json-default">
<action name="login" class="org.njy.action.LoginAction">
<result type="json"></result>
</action>
</package>
</struts>
在这里不在继承struts-default，而是采用继承json-default。其xml代码如下：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="json-default" extends="struts-default">
<result-types>
<result-type name="json" class="com.googlecode.jsonplugin.JSONResult"/>
</result-types>
<interceptors>
<interceptor name="json" class="com.googlecode.jsonplugin.JSONInterceptor"/>
</interceptors>
</package>
</struts>
2、Action类
package org.njy.action;
import org.njy.bean.Admin;
import com.opensymphony.xwork2.Action;
public class LoginAction {
private Admin admin;
private String message;
public String execute() throws Exception {
if("njy".equals(admin.getUsername()) & "njy".equals(admin.getPassword())){
message = "登陆成功!";
}else {
message = "用户名/密码有误!";
}
return Action.SUCCESS;
}
// 省略get/set方法
}
3、页面代码：
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Struts2——loign</title>
<SCRIPT type="text/javascript" src="js/jquery.js"></script>
<SCRIPT type="text/javascript" src="js/login.js"></SCRIPT>
</head>
<body>
<div id="msg"></div>
username：<input name="admin.username" id="username" type="text"/><br/>
password：<input name="admin.password" id="password" type="password"/><br/>
<input type="submit" id="submit" value="login">
</body>
</html>
4、Login.js
$(document).ready(function() {
// 直接把onclick事件写在了JS中
$("#submit").click(function() {
$.ajax({
url : "login.action", // 后台处理程序
type : "post", // 数据发送方式
dataType : "text", // 接收数据格式
data : "admin.username="+$("#username").val()+"&admin.password="+$("#password").val(), // 要传递的数据
// 回传函数
timeout:20000,// 设置请求超时时间（毫秒）。
error: function () {//请求失败时调用函数。
$("#msg").html("请求失败!");
},
success:function(data){ //请求成功后回调函数。
var dataObj=eval("("+data+")");//转换为json对象
$("#msg").html(dataObj.message);
alert("用户名:"+dataObj.admin.username+",密码:"+dataObj.admin.password);
}
});
});
});
如果接收数据dataType的值为“json”，就不用对返回值进行eval()处理了，因为它已经是json格式的了。那么最后几句代码应该改为：
success:function(data){ //请求成功后回调函数。
$("#msg").html(data.message);
alert("用户名:"+dataObj.admin.username+",密码:"+dataObj.admin.password);
}
861
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
