首页 > 代码库 > dojo demo, 服务器验证用户名是否已经被使用

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

2024-07-08 15:51:47   223人阅读

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


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




页面打开如下：


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


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



处理流程：

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


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


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


table.html

<!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=http://www.mamicode.com/"dojo/dojo.js"  djConfig="parseOnLoad: true"></script>>
main.js

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
<%@ 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();
	}
%>


联系
我们