Struts2+json+jQuery（用户名印证） _JavaScript

Struts2+json+jQuery（用户名验证）

1、添加struts-2.2.3 jar包

???? commons-fileupload-1.2.2.jar

???? commons-io-2.0.1.jar

???? commons-lang-2.5.jar

???? commons-logging-1.1.1.jar

???? freemarker-2.3.16.jar

???? javassist-3.7.ga.jar

???? ognl-3.0.1.jar

???? struts2-core-2.2.3.jar

???? struts2-json-plugin-2.2.3.jar

???? xwork-core-2.2.3.jar

2、在web.xml中添加struts2配置

<!-- struts2在web.xml中的配置 -->
	<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>*.action</url-pattern>
	</filter-mapping>

3、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.devMode" value="fasle" />
	<constant name="struts.i18n.encoding" value="utf-8" />

	<package name="default" extends="json-default" namespace="/test">
		<action name="json" class="com.yjw.action.jsonAction" method="checkLogin">
			<result name="success" type="json">/index.jsp</result>
		</action>
	</package>

</struts>

4、添加jQuery js包

??? WebRoot/scripts/jquery-1.6.1.js

5、src/com/yjw/action/jsonAction.java

package com.yjw.action;

import java.io.Serializable;

import com.opensymphony.xwork2.ActionSupport;

public class jsonAction extends ActionSupport implements Serializable {
	private String userName;
	private int isExist;
	
	public int getIsExist() {
		return isExist;
	}

	public void setIsExist(int isExist) {
		this.isExist = isExist;
	}

	public String getUserName() {
		return userName;
	}

	public void setUserName(String userName) {
		this.userName = userName;
	}

	public String checkLogin() {
		if(this.userName.equals("admin")){
			this.userName = "yjw";
			this.isExist = 1;
		}else{
			this.setIsExist(0);
		}
		return SUCCESS;
	}
}

6、WebRoot/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>用户名验证</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="Content-Type" content="text/html;charset=UTF-8">

		<script type="text/javascript" src="scripts/jquery-1.6.1.js"></script>
		<style type="text/css">
			.userText {
			    /*控制文本框的边框是红色的实线*/
				border: 1px solid red;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function() {
				var userName = $("#userName");
				//页面加载时清空text
				userName.val("");
				var userName_span = $("#userName_span");
				var reg1 = /^[A-Za-z]{1}(\w){4,19}$/; //正则：5-20位字母、数字或下划线组合，首字符必须为字母
				var userName_span1 = "<font style='color:red'>请输入用户名！</font>";
				var userName_span2 = "<font style='color:red'>用户名已经存在！</font>";
				var userName_span3 = "<font style='color:green'>用户名可用！</font>";
				var userName_span4 = "<font style='color:red'>用户名格式不正确！</font>";
				
				userName.change(function() {
					//当userName文本框中没有数据时，设置文本框的border样式，做出提示
					var userNameVal1 = $.trim(userName.val());
					var userNameVal2 = userName.val();
					if(userNameVal1 == ""){
						userName.addClass("userText");
						userName_span.html(userName_span1);
						return false;
					}else{
						userName.removeClass("userText");
						userName_span.html("");
						if(!reg1.test(userNameVal2)){
							userName.addClass("userText");
							userName_span.html(userName_span4);
							return false;
						}else{
							//到服务端判断用户名是否存在
							$.post(
								"test/json.action",
								{"userName":userNameVal1},
								function(result){
									if(result.isExist == 1){
										userName.removeClass("userText");
										userName_span.html(userName_span2);
										return false;
									}else{
										userName.removeClass("userText");
										userName_span.html(userName_span3);
										return true;
									}
								},
								"json"
							);
						}
					}
				});
			});
		</script>
	</head>

	<body>
		请输入用户名：
		<input id="userName" type="text" />
		<span id="userName_span"></span><br>
	</body>
</html>

1 楼 mianhuatangone 2011-06-19

引用

var userNameuserNameVal2 = userName.val();

2 楼 yin_jw 2011-06-19

var userNameVal2 = userName.val();

3 楼 lsh4894 2011-08-07

struts2-json-plugin-2.2.3.jar 哪里有得下载

4 楼 shuiwangxing 2011-08-30

运行这个插件的时候，老是报404的错误