Jsp + ajax implementation is refreshing. When you move the mouse away from the text box, the user name is verified. The operation is as follows: Create an input page named input. jsp,
Copy codeThe Code is as follows:
<% @ Page contentType = "text/html; charset = UTF-8" %>
<Html>
<Head>
<Title> jsp + ajax implementation without refreshing _ verify the user name by leaving the text box with the mouse </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Style type = "text/css">
. Style1 {
Color: # FF3333;
Font-weight: bold;
}
. Style14 {
Font-size: 13px
}
. Text12black {
Font-size: 12px;
}
</Style>
</Head>
<Body bottomMargin = "0" leftMargin = "0" topMargin = "0" rightMargin = "0"
Marginheight = "0" marginwidth = "0">
<Table width = "748" border = "0" align = "center" cellpadding = "0"
Cellspacing = "0">
<Tr>
<Td height = "5"> </td>
</Tr>
</Table>
<Script language = "javascript">
// Create an XMLHttpRequest object
Function GetO (){
Var ajax = false;
Try {
Ajax = new ActiveXObject ("Msxml2.XMLHTTP ");
}
Catch (e ){
Try {
Ajax = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Catch (E ){
Ajax = false;
}
}
If (! Ajax & typeof XMLHttpRequest! = 'Undefined '){
Ajax = new XMLHttpRequest ();
}
Return ajax;
}
Function getMyHTML (serverPage, objID ){
Var ajax = GetO ();
// Get an html element and assign a value to the attribute of this element below
Var obj = document. all [objID];
// Set the Request Method and target and set it to asynchronous submission
Ajax. open ("post", serverPage, true );
Ajax. onreadystatechange = function (){
If (ajax. readyState = 4 & ajax. status = 200 ){
// InnerHTML is the attribute of the HTML element. If you do not understand the attribute, It is understood as the variable of the HTML element.
// Ajax. responseText is the return value of the server. The value is assigned to the attribute of the element id = passport1.
// The innerHTML attribute or variable indicates the content between a group of start and end tags.
Obj. innerHTML = ajax. responseText;
}
}
// Send the request
Ajax. send (null );
}
Function CheckName (){
GetMyHTML ("check. jsp? GroupName = "+ name_form.group_name.value," passport1 ");
}
// This function is used to assign the attribute back to the original content when the user's focus is returned from other places to the group_name input box.
Function sl (tx ){
If (tx = 'passport1 '){
Document. all [tx]. innerHTML = "<div class = 'reds' align = 'left'> 4-20 characters (including uppercase/lowercase letters, Chinese characters, numbers, and special characters) 1 Chinese character is equal to 2 characters. We recommend that you use Chinese characters. It cannot be modified after registration. </Div> ";
}
}
</Script>
<Form name = "name_form" method = post>
<Table width = "60%" height = "80" align = "center" border = "1" bordercolor = "#96D6E8"
Class = "text12black">
<Tr>
<Td width = "22%" height = "20" align = "right">
User name:
</Td>
& Lt; td width = "61%" align = "left" & gt;
<INPUT name = "group_name" type = "text" value = "" size = 30
Maxlength = "50" onBlur = "javaScript: CheckName ();"
OnFocus = "return sl ('passport1');"/>
<Br/>
<Div id = "passport1" style = "color: red"> </div>
</Td>
<Td id = "passport2" valign = "top">
<Div class = "explain_blue" align = 'left'>
<Span class = "gray"> 4-20 characters (including uppercase/lowercase letters, Chinese characters, numbers, and special characters)
1 Chinese Character equals 2 characters. We recommend that you use a Chinese nickname. It cannot be modified after registration. </Span>
</Div>
</Td>
</Tr>
</Table>
</Form>
</Body>
</Html>
On the create verification page, name it check. jsp. The Code is as follows:
Copy codeThe Code is as follows:
<% @ Page contentType = "text/html; charset = UTF-8" %>
<%
String action = "";
String groupname = "";
// Check the user name
// Used as a database connection, which can be modified according to your situation. If it is a test, you do not need to use the * mark statement.
Try {
Action = request. getParameter ("action ");
Groupname = request. getParameter ("groupName"). trim ();
If ("". equals (groupname )){
Out. println ("<div class = 'reds' align = 'left'> the user name cannot be blank! </Div> ");
} Else if (groupname. length () <4 | groupname. length ()> 20 ){
Out. println ("<div class = 'reds' align = 'left'> User Name"
+ Groupname + "invalid! (It Can Be 4 to 20 characters in length and cannot be used? # = And other special characters) </div> ");
} Else if ("zhangsan". equals (groupname )){
Out. println ("<div class = 'reds' align = 'left'>" + "username"
+ Groupname + "occupied. Please enter it again! </Div> ");
} Else {
Out. println ("your user name is available ");
}
} Catch (Exception e ){
System. out. println (request. getServletPath () + "error :"
+ E. getMessage ());
}
%>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
