The server code is not pasted here.
Html code is relatively simple. You need to introduce the jquery Library
Copy codeThe Code is as follows:
<Body>
Enter the User Name: <input type = "text" id = "userName" class = "userText"/> <input type = "button" value = "verify" id = "verifyButton"/>
<Div id = "result"> </div>
</Body>
Js Code
Copy codeThe Code is as follows:
/*
* Register these tasks when page loading is complete.
**/
$ (Document). ready (function (){
// The content is the code to be executed after page loading.
Var userNameNode = $ ("# userName ");
// Click the button to register the event.
$ ("# VerifyButton"). click (function (){
// 1. Get the content of the text box
Var userName = userNameNode. val ();
// 2. Send this content to the server
If (userName = ""){
Alert ("user name cannot be blank ");
} Else {
$. Get ("http: // 127.0.0.1: 8080/JQuery/UserVerify? UserName = "+ encodeURI (userName), null, function (response ){
// 3. receive the data returned by the server and fill it in the div
$ ("# Result" response .html (response );
});
}
});
// You need to find the text box to register the event
UserNameNode. keyup (function (){
// Obtain the content in the current text box
Var value = userNameNode. val ();
If (value = ""){
// Change the border to red with a background image
UserNameNode. addClass ("userText ");
} Else {
// Remove the border and background image
UserNameNode. removeClass ("userText ");
}
});
});
Css style, the purpose is to make the border red and red waves below when there is no content in the text box
Copy codeThe Code is as follows:
. UserText {
/* The border of the control text box is a red solid line */
Border: 1px solid red;
Background-image: url (../images/userVerify.gif );
Background-repeat: repeat-x;
Background-position: bottom;
}
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
