1.struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<constant name="struts.i18n.encoding" value="UTF-8"></constant> <package name="jsontest" namespace="/" extends="json-default">
<default-action-ref name="login"></default-action-ref>
<action name="login" class="com.action.LoginAction">
<result type="json">
<param name="root">tip</param>
</result>
</action>
</package> </struts>
2.User.java
package com.model;
public class User {
private String username;
private String password;
//set/get
}
3.LoginAction.java
public class LoginAction extends ActionSupport {
private User user;
private String tip;
public String execute() throws Exception {
String username=user.getUsername();
String password=user.getPassword();
username=URLDecoder.decode(username, "utf-8"); //中文传参处理
System.out.println("Username:"+username+" , Password:"+password);
Map<String,String> map=new HashMap<String,String>();
map.put("username", username);
JSONObject jo=JSONObject.fromObject(map);
tip=jo.toString();
System.out.println("Get Tips:"+tip);
return SUCCESS;
}
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
public String getTip() {
return tip;
}
public void setTip(String tip) {
this.tip = tip;
}
}
4.index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>Struts2+jQuery+JSON</title> <style type="text/css">
.decorate{ /*控制文本框样式*/
border:1px solid #F00;
background:url(images/text_bg.gif) repeat-x;;
background-position:bottom;
}
</style>
<script type="text/javascript" src="jquery1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//var username=$("#username"); //抓取对象
//var password=$("#password");
$("#validate").click(function(){
var username=$("#username").val(); //只能使用在jQuery 函数的里面
var password=$("#password").val();
if(username==""||password==""){
alert("用户名或密码不能为空！");
}else{
var url="login?user.username="+encodeURI(encodeURI(username))+
"&user.password="+encodeURI(encodeURI(password));
$.getJSON(url,null,function(data){
// convert to json object
//alert(data); {"username":"guan"}
var message=eval("("+data+")");
//alert(message); {object,object}
$("#tip").html("欢迎您！"+message.username);
});
}
}); $("#username").keyup(function(){
var username=$("#username").val();
if(username==""){
$("#username").addClass("decorate");
}else{
$("#username").removeClass("decorate");
}
});
$("#password").keyup(function(){
var password=$("#password").val();
if(password==""){
$("#password").addClass("decorate");
}else{
$("#password").removeClass("decorate");
}
});
});
</script>
</head> <body>
<div id="tip" style="color:#F00; font-weight:bold; "></div>
<fieldset style="width:600px; ">
<legend>用户登录</legend>
<p align="center">账号：<input type="text" name="user.username" id="username" class="decorate" /></p>
<p align="center">密码：<input type="password" name="user.password" id="password" class="decorate" /></p>
<p align="center"><input type="submit" id="validate" name="validate" value="确定" /></p>
</fieldset>
</body>
</html>
