dojo demo, 服务器验证用户名是否已经被使用

这个demo有助于理解JS与服务器的协同工作。@H_301_2@

@H_301_2@

文档结构如上图，主要是三个文件： main.js table.html validateUserName.jsp (代码见文章末尾)
@H_301_2@

@H_301_2@

页面打开如下：@H_301_2@

选中第一个输入框后，右侧出现定义好的提示信息。如下：@H_301_2@

输入“olduser",为了简化验证过程，在validateUserName.jsp 中用硬编码验证用户名是否为”olduser",返回JSON字串。如果是，则返回{valid:false}，否则返回{valid:true}@H_301_2@
@H_301_2@

@H_301_2@

处理流程：@H_301_2@
@H_301_2@

用户输入“olduser",并把焦点移出当前输入框后， onchange 事件触发，调用main.js中的usernameOnChange函数，此函数发送验证请求到server,由validateUserName.jsp处理此请求。 validateUserName.jsp判断”olduser"为已有用户名，于是返回{valid:false}到浏览器。浏览器收到服务器的response之后，由main.js中的usernameValidationHandler函数处理响应，它判断valid为false,则显示定义好的error message.
@H_301_2@

@H_301_2@

valid为true的情况与为false的情况类似，不会显示error message.@H_301_2@

@H_301_2@

有个示解决的问题是当valid为false为false时，error message 并未显示到页面上，应该是dijit.byId("tableuserName").displayMessage(errorMessage);这一句@H_301_2@没有生效，这个问题暂时没能解决，在后面的学习中会留意看怎么样找到方法解决。
@H_301_2@

@H_301_2@

table.html@H_301_2@

@H_301_2@

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css" title="text/css">
			@import "dijit/themes/claro/claro.css";
			@import "dojox/form/resources/CheckedMultiSelect.css";
</style>
<script type="text/javascript" src="dojo/dojo.js"  djConfig="parSEOnLoad: true"></script>
<script type="text/javascript" src="main.js"></script>
<script>
	dojo.require("dojo/parser");
//	dojo.require("dijit/form/Button");
	dojo.require('dijit.form.ValidationTextBox');
	
//dojo.require("dojo/data/ItemFileReadStore");
 
</script>
</head>
<body id="content" class="claro">
	<div id="mortgages" class=" ">
	
		<div class="" id="dijit/form/Form">
			<h2 class=""></h2>
			<p style="width:700px;">
				please enter you name and address
			</p>
 
			<div class=""> 
				<div class="">
				<label for="userName">User Name</label>
				<input type="text" name="userName" value=""
				    onchange="usernameOnChange"
				    data-dojo-props="" id="tableuserName" 
				    		dojoType="dijit.form.ValidationTextBox" 
		promptMessage="oops"
		invalidMessage="invalid"
		missingMessage="Ooops!  You forgot your first name!" />	
 
				</div>
				<div class="">
				<label for="Address">Address</label>
				<input type="text" name="Address" value=""
				    data-dojo-type="dijit/form/ValidationTextBox"
				    onchange=""
				    data-dojo-props="trim:true,propercase:true" id="tableAddress" />	
 
				</div>
 
			</div>
		</div>
	
	</div>
	
	<div id="result"></div>
	
 
</body>
</html>

main.js

@H_301_2@

function usernameOnChange() {
	console.log("run");
	var userName = dijit.byId("tableuserName").getValue();
	if(userName == ""){
		console.log("user name is empty");
		return;
	}
	
	dojo.xhrGet({
		url:"validateUserName.jsp?userName=" + userName,handleAs:"json",handle:usernameValidationHandler
	});
}
function usernameValidationHandler(response){
	//console.log("get response");
	dijit.byId("tableuserName").displayMessage("yes");
	if(!response.valid){
		var errorMessage = "user name already exists";
		//console.log(errorMessage);
		dijit.byId("tableuserName").displayMessage(errorMessage);
	}
}

validateUserName.jsp

@H_301_2@

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	try{
		System.out.println("UserName :"+
		request.getParameter("userName"));
		if(request.getParameter("userName").equals("olduser")){
			out.println("{valid:false}");
			System.out.println("To Brower : false");
			
		}else{
			out.println("{valid: true}");
			System.out.println("To Brower : true");
		}
	}catch(Exception ex){
		out.println(ex.getMessage());
		ex.printStackTrace();
	}
%>

dojo demo, 服务器验证用户名是否已经被使用

猜你在找的Dojo相关文章