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

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

页面打开例如以下:

选中第一个输入框后,右側出现定义好的提示信息。例如以下:

输入“olduser" , 为了简化验证过程,在validateUserName.jsp 中用硬编码验证username是否为”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

please enter you name and address

onchange="usernameOnChange"

data-dojo-props="" id="tableuserName"

dojoType="dijit.form.ValidationTextBox"

promptMessage="oops"

invalidMessage="invalid"

missingMessage="Ooops! You forgot your first name!" />

data-dojo-type="dijit/form/ValidationTextBox"

onchange=""

data-dojo-props="trim:true, propercase:true" id="tableAddress" />

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();

}

%>

精彩文章

评论可见,请评论后查看内容,谢谢!!!评论后请刷新页面。
大家都在看: