Small valley practical Jquery (1) -- User Name verification, small valley jquery

Small valley practical Jquery (1) -- User Name verification, small valley jquery

Xiaogu kids shoes have been resting for several days and finally started learning again. Now we are learning Jquery. Let's see if Shenma is jQuery?

• JQuery is designed to change the way that you write JavaScript.
• The focus of jQuery is "find some elements, do something with them ".
• Write less, do more.

It is a javascript framework compatible with multiple browsers and is compatible with CSS3. It allows users to easily process HTML, events, create animation effects, and use Ajax. the feature is based on a powerful CSS selector. Almost all operations first use the selector to find DOM objects and then perform various operations on them.

 

When learning JQuery, I used the previously learned HTML, Javascript, CSS, and DIV. The following is a summary of the learning process in practice.

 

What we implement today is a small example of user name verification, which is divided into two parts: the server side paging side. on the server side, when the input user name already exists, the system prompts that the user name already exists, otherwise, the user name is available. the focus is on compiling the client code and prompting the page information during the input process. by the way, because other js files are written using jQuery, We need to write and introduce jQuery files. For example, we need to take the tool (jQuery) first and then use the tool (Other js files, otherwise, the program cannot run. import file 1:

Figure 1

The code for userVarify. js is as follows:

 

/** Two things need to be done through Javascript code * 1. when the button is pressed, it obtains the data in the text box, sends it to the server, finally accepts the data returned by the server, and fills in the div we reserve * 2. in the text box, after you press the button, you need to determine whether the content in the text box is empty. If it is not empty, cancel the red border and background image; otherwise, keep */$ (document ). ready (function () {// The content here is the code var userNameNode =$ ("# userName") to be executed after page loading is complete; // you need to find the button, register event $ ("# varifyButton "). click (function () {// obtain the content of the text box var userName = userNameNode. val (); // send this content to the server if (userName = "") {alert ("userName cannot be blank! ");} Else {$. get (" http: // 192.168.24.118: 8080/UserVerify? UserName = "+ encodeURI (userName), null, function (response) {// 3. receive the data returned by the server and fill it in the div $ ("# result" ).html (response) ;}}); // you need to find the text box and register the event userNameNode. keyup (function () {// get the content of the current text box var value = userNameNode. val (); if (value = "") {// red the border with the background image userNameNode. addClass ("userText");} else {// remove the border and background image userNameNode. removeClass ("userText ");}});});

The Code of userVarify.css is also quite simple. In just a few words, it achieves the effect of the prompt line. If CSS is powerful, let's take a look at it ~~

. 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 ;}

Grain Storage:

Small instances also involve a lot of technologies. Xiaogu kids shoes carefully summarized the following:

1. It is not difficult to find that HTML is responsible for page content, CSS is responsible for page styles, and Javascript is responsible for page behavior.

2. the first part of the tag in Figure 1 specifies the rendering specifications used by the browser when interpreting HTML code, such as the display position and size of an element. this rendering specification is provided by w3c. Various browsers interpret HTML code based on this specification, and finally present a variety of page effects. however, even under the same Doctype specification, different browsers use different text modes to render HTML pages. there are three types of text modes: odd mode, standard mode and almost standard mode. we can get document through js. the value of compatMode is used to obtain the text mode used by the current browser. The value is generally two: BackCompat (weird text mode) and CSS1Compat (standard text mode ).

3. Define a div or span node to display the data returned by the server in the future. This is a tip for us to get the data.

4. $ (document). ready (function () {}) defines the method to be executed when page loading is complete.

5. The $ () method is used to obtain the specified page node. The parameter is a CSS selector. By getting the DOM and defining its events, you can perform operations or obtain data to complete the content we want to implement.

6. $. the get () method can interact with the server in the get mode. when data is returned, the callback method is called. This method receives a plain text parameter representing the data returned by the server.

7. to make a CSS effect dispensable, you can use addClass ()/removeClass () to add or delete a class to or from a node, to control the effect of CSS on HTML nodes with this class.

 

Actually, after completing this example, Xiaogu kids shoes really think JQuery is so simple.

A piece of jquery code that does not refresh the page to verify the user name

The simplest way to use jquery is to use the $. post method. For example, the user name's text box id is txtName, followed by a span, and the id is lblError,
$ (Function (){

$ ("# TxtName"). blur (function (){
$ ("# LblError" ).html ("");
Var name = $ ("# txtName"). val ();
If (name! = "" & Name! = Null ){
$. Post ("a. ashx", {"name": name}, function (ags) {// a. ashx is the background code.
If (ags = 0 ){
$ ("# LblError" ).html ("the user name can be used! "2.16.css (" color "," Blue ");
} Else {
$ ("# LblError" ).html ("the user name already exists! ").Css (" color "," red ");
}
});
}
});

});

Background code:
String name = context. Request. Params ["name"];
Int I = 0;
// Query data from the database to determine whether the user name exists. I = 0 does not exist, and I = 1 exists.
Context. Response. Write (I );

I want to solve a problem of using JQUERY + AJAX to implement page user name verification, but there are always errors. Please take a look.

--!!!
Just mix jquery with native js.
$. Ajax also contains a $. post package.
It can only be said that writing is cute.

If you use jquery to use the ajax request method in jquery, you do not need to create the XMLHttpRequest object yourself.
More available image write instances
$ (Function (){
// Name loss cursor Verification
$ ("# Uname"). blur (function (){
// Ajax request servlet Verification
$. Post ("/servlet1/checkUname", {value: this. value}, function (date ){
......
.....
});

});

});