AJAX提交Struts2表單(服務器端validation校驗出錯提示)

時間 2021-08-13

標籤 javascript css html java jquery ajax apache json 服務器 app 欄目 Ajax 简体版

原文原文鏈接

1.目標javascript

在基於Struts2的應用中，利用AJAX方式提交表單實現一個登錄驗證Action，將服務器端驗證結果展示在頁面上css

字段錯誤展現：
html

action 錯誤提示
java

2.技術實現jquery

利用struts2-jquery插件和struts2-json插件實現
3.實現步驟ajax

3.1依賴jar包
apache

除了struts2-core-2.2.3.jar包之外，還要下載兩個jar包json

struts2-jquery-plugin-3.1.0.jar服務器

struts2-json-plugin-2.2.3.jarapp

3.2編寫登錄處理類Action

這個Action和咱們普通的Action沒有任何區別

package com.crazycoder2010.struts2;

import com.opensymphony.xwork2.ActionSupport;

public class LoginAction extends ActionSupport {
	private static final long serialVersionUID = 6627313805146336838L;
	private String name;
	private String password;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	@Override
	public String execute() throws Exception {
		if(!("Kevin".equals(this.name)&&"111111".equals(this.password))){
			this.addActionError("Wrong!");
		}
		return INPUT;
	}
}

3.3爲登錄程序添加驗證文件LoginAction-Validation.xml(和LoginAction放置在同一個目錄下)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE validators PUBLIC "-//OpenSymphony Group//XWork Validator 1.0.2//EN" "http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd">
<validators>
	<field name="name">
		<field-validator type="requiredstring">
			<param name="trim">true</param>
			<message>Name is required.</message>
		</field-validator>
		<field-validator type="stringlength">
			<param name="minLength">2</param>
			<param name="maxLength">60</param>
			<message>Name must be between ${minLength} and ${maxLength} characters long.</message>
		</field-validator>
	</field>
	<field name="password">
		<field-validator type="requiredstring">
			<param name="trim">true</param>
			<message>Password is required.</message>
		</field-validator>
		<field-validator type="stringlength">
			<param name="minLength">2</param>
			<param name="maxLength">60</param>
			<message>Password must be between ${minLength} and ${maxLength} characters long.</message>
		</field-validator>
	</field>
</validators>

3.4配置Action類struts.xml

這個Action的配置有些特殊，注意

a.package須要繼承自json-default包

b.action的攔截器引用jsonValidationWorkflowStack

c.result的type類型爲json

d.配置該action須要轉化成json對象的字段includeProperties

<?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="default" extends="json-default">
		<action name="login" class="com.crazycoder2010.struts2.LoginAction">
			<interceptor-ref name="jsonValidationWorkflowStack"></interceptor-ref>
            <result name="input" type="json">
		  	  	<param name="ignoreHierarchy">false</param>
				<param name="includeProperties">actionErrors\[\d+\], fieldErrors\..+$, actionMessages\[\d+\]</param>
		  	</result>
        </action>
	</package>
</struts>

3.5編寫登錄頁面login.jsp

a.將struts2-jquery的taglib引入頁面中

b.在<head>元素中經過<sj:head/>標籤引入jquery的css和js文件（這些文件都壓縮在struts2-jquery-plugins.jar包中，所以不須要單獨下載jquery相關的js了）

c.提交submit按鈕改用struts2-jquery插件中的

<sj:submit onCompleteTopics="complete" --在服務器端處理完畢將結果返回到頁面時所觸發的javascript函數

targets="result" --用來展現結果的容器ID列表，以','分割

onBeforeTopics='clearError' --在將數據提交到服務器端之前所觸發的javascript函數，如作一些客戶端的驗證錯誤提示信息的清除

返回json結果字符串示例：

{"actionErrors":[],"actionMessages":[],"fieldErrors":{"name":["Name is required."],"password":["Password is required."]}}

<%@ page language="java" contentType="text/html; charset=utf-8"	pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
	.errorLabel{color: red;}
</style>
<sj:head jquerytheme="cupertino" ajaxcache="false" compressed="false"/>
</head>
<body>
	<s:form action="login" method="post" theme="simple" namespace="/">
		<ul id="errorMessages"></ul>
		<p>User Name:</p>
		<p><input name="name"/><span id="error_name"></span></p>
		<p>Password:</p>
		<p><input type="password" name="password"/><span id="error_password"></span></p>
		<sj:submit 
			onCompleteTopics="complete" 
			targets="result" 
			onBeforeTopics="clearError"
			value="Login"/>
	</s:form>
<script type="text/javascript">
	$.subscribe('clearError', function(event,data) {
		$("#errorMessages").html("");
		$('.errorLabel').html('').removeClass('errorLabel');
	});
	$.subscribe('complete', function(event,data) {
		$("#errorMessages").html("");//先將上次認證的錯誤消息清除掉
		$('.errorLabel').html('').removeClass('errorLabel');
		
		var json = $.parseJSON(event.originalEvent.request.responseText);
		if(json.actionErrors && json.actionErrors.length>0){//判斷有沒有actionErrors
			$.each(json.actionErrors,function(index,data){
				$("#errorMessages").append("<li>"+data+"</li>");
			});
			return;
		}
		if(json.fieldErrors && !isEmpty(json.fieldErrors)){//判斷有沒有fieldError(LoginAction-validation.xml驗證錯誤)
			$.each(json.fieldErrors,function(index,value){//index就是field的name,value就是該filed對應的錯誤列表，這裏取第一個
				$("#error_"+index).html(value[0]);
				$("#error_"+index).addClass("errorLabel");
			});
			return;
		}
		alert("登錄成功");//既沒有actionError有沒有fieldError則登錄成功
	});
	function isEmpty(obj){//判斷對象是否爲空(處理Object obj = {}這種狀況認爲isEmpty=true)
		for(var p in obj){
			return false;
		}
		return true;
	}
</script>
</body>