用json类型的result组件实现异步校验

首先,导入下图所示的jar包:


用json类型的result组件实现异步校验_第1张图片


jar包可以在群(102992282)文件中下载,或者在官网下载。


下面为Action中的代码:


public class ValidateForm {

	private String name;

	private Map<String, Object> info = new HashMap<String, Object>();

	public Map<String, Object> getInfo() {
		return info;
	}

	public void setInfo(Map<String, Object> info) {
		this.info = info;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String execute() {
		System.out.println(name);
		if(!"hxl".equals(name)) {
			info.put("flag", true);
			info.put("msg", "用户名可以用");
		} else {
			info.put("msg", "用户名不可以用");
		}
		return "success";
	}
}

下面为struts.xml中的代码:


<!-- 将extends属性改成json-default -->
	<package name="validateform" namespace="/validateform" extends="json-default">
		<action name="form" class="hxl.insist.ValidateForm">
			<result name="success" type="json">
				<param name="root">info</param>
			</result>
		</action>
	</package>

下面为jsp中的代码:


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script type="text/javascript" src="/struts/js/jquery-1.4.3.js"></script>

<script type="text/javascript">
	function validate() {
		var username = document.getElementsByName("name")[0].value;
		$.post(
			"/struts/validateform/form",
			{"name":username},
			function(info) {
				var hNode = document.getElementById("msg");
				if(info.flag) {
					hNode.innerHTML="<span style='color:green'>"+info.msg+"</span>";
				}else {
					hNode.innerHTML="<span style='color:red'>"+info.msg+"</span>";
				}
			}
		);
	}
</script>
</head>

<body>
	<form action="" method="post">
		用户名:<input type="text" name="name" onblur="validate()" /> 
	</form>
	
	<h1 id="msg"></h1>
	
</body>
</html>

注意:别忘了引入jquery文件。


你可能感兴趣的:(jquery,json,struts2,result组件)