Struts2+JSON+JQuery实现简单验证

刚学的东东，搞了很久的一个小成果，在此与大家分享。。。

 

1.创建struts_JSON项目，加入struts2所需的六个包，分别为：commons-fileupload-1.2.1.jar， commons-io-1.3.2.jar， freemarker-2.3.15.jar ， ognl-2.7.3.jar，  struts2-core-2.1.8.1.jar ， xwork-core-2.1.6.jar 。

 

2.创建web.xml 和 struts.xml 代码分别如下：

   web.xml

   

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

    <display-name>Struts JSON</display-name>

    <filter>
        <filter-name>struts2</filter-name>
        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <welcome-file-list>
      <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5" 

	xmlns="http://java.sun.com/xml/ns/javaee" 

	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 

	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 

	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

	

    <display-name>Struts JSON</display-name>



    <filter>

        <filter-name>struts2</filter-name>

        <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>

    </filter>



    <filter-mapping>

        <filter-name>struts2</filter-name>

        <url-pattern>/*</url-pattern>

    </filter-mapping>



	<welcome-file-list>

	  <welcome-file>index.jsp</welcome-file>

	</welcome-file-list>

</web-app>

 

 

    struts.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>
<!--
    <constant name="struts.enable.DynamicMethodInvocation" value="false" />
    <constant name="struts.devMode" value="false" />

    <include file="example.xml"/>

    <package name="default" namespace="/" extends="struts-default">
        <default-action-ref name="index" />
        <action name="index">
            <result type="redirectAction">
                <param name="actionName">HelloWorld</param>
                <param name="namespace">/example</param>
            </result>
        </action>
    </package>
-->
    <!-- Add packages here -->
    <constant name="struts.enable.DynamicMethodInvocation" value="true" />
    <constant name="struts.devMode" value="true" />
    <constant name="struts.i18n.encoding" value="UTF-8"></constant>

    <package name="json test" 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>

<?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>

<!--

    <constant name="struts.enable.DynamicMethodInvocation" value="false" />

    <constant name="struts.devMode" value="false" />



    <include file="example.xml"/>



    <package name="default" namespace="/" extends="struts-default">

        <default-action-ref name="index" />

        <action name="index">

            <result type="redirectAction">

                <param name="actionName">HelloWorld</param>

                <param name="namespace">/example</param>

            </result>

        </action>

    </package>

-->

	<!-- Add packages here -->

    <constant name="struts.enable.DynamicMethodInvocation" value="true" />

    <constant name="struts.devMode" value="true" />

    <constant name="struts.i18n.encoding" value="UTF-8"></constant>

    

    <package name="json test" 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>

 

 

3.加入JSON 所需的包共七个包,都是可以在struts-2.1.8.1\lib 目录下可以找得到的，他们分别为：json-lib-2.1.jar， struts2-json-plugin-2.1.8.1.jar，（这两个是JSON所必须的包） ezmorph-1.0.3.jar， commons-collections-3.2.jar， commons-beanutils-1.7.0.jar， commons-logging-1.0.4.jar， commons-lang-2.3.jar 。（因为json大量引用了Apache commons的包，所以需要引入commons的四个包。）

 

4.创建model ：User.java

  

package com.model;

public class User {

    private String username="";
    private String password="";

    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
}

package com.model;



public class User {



	private String username="";

	private String password="";

	

	public String getUsername() {

		return username;

	}

	public void setUsername(String username) {

		this.username = username;

	}

	public String getPassword() {

		return password;

	}

	public void setPassword(String password) {

		this.password = password;

	}

}

 

 

5.创建action： LoginAction.java:

  

package com.action;

import java.net.URLDecoder;
import java.util.HashMap;
import java.util.Map;

import net.sf.json.JSONObject;

import com.model.User;
import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class LoginAction extends ActionSupport {

    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;
    }

}

package com.action;



import java.net.URLDecoder;

import java.util.HashMap;

import java.util.Map;



import net.sf.json.JSONObject;



import com.model.User;

import com.opensymphony.xwork2.ActionSupport;



@SuppressWarnings("serial")

public class LoginAction extends ActionSupport {



	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;

	}

	

}

 

6.创建View login.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>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <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="js/jquery-1.4.2.min.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);
                        var message=eval("("+data+")");
                        $("#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>

<%@ 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>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">    

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->

	<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="js/jquery-1.4.2.min.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);

						var message=eval("("+data+")");

						$("#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>