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>