First create an Ajax class (Ajax class)
Then a new file form.html is created.
----------------------------Form.html ----------------------------
Copy codeThe Code is as follows:
<Script src = "ajax. js"> </script> <! -- Reference ajax class -->
<Script language = "javascript" type = "text/javascript">
Function show (username ){
Var ajax = Ajax ();
Var noteobj = document. getElementById ("note"); // visualize the tag with id as note
Ajax. post ("form. php", {username: username}, function (data) {// The second username is the value to be passed
Noteobj. innerHTML = data; // data is the data obtained from the server.
});
}
</Script>
<Style>
Input {font: menu };
</Style>
<Form action = "reg. php" method = "post">
Username: <input type = "text" name = "username" onblur = "show (this. value) "/> <div id =" note "> </div> <br/>
Password: <input type = "password" name = "password"> <br/>
<Input type = "submit" value = "register">
</Form>
Create a new php file form. php
----------------------------Form.html ----------------------------
Copy codeThe Code is as follows:
<? Php
Header ("Content-type: text/html; charset = gb2312"); // sets the character set
$ Mysqli = new mysqli ("localhost", "root", "123", "demo"); // open the demo Database
$ Result = $ mysqli-> query ("select * from zhanghao where name = '{$ _ POST [" username "]}'");
If ($ result-> num_rows> 0) {// determines whether data is queried.
Echo "<font color = 'red'> the user {$ _ POST [" username "]} already exists! </Font> ";
} Else {
Echo "<font color = 'green'> Users {$ _ POST [" username "]} can register </font> ";
}
?>
In the browser, open form.html:
Note: You must create a "zhanghao" table in the MySQL database in advance"
If you enter an existing name, the following prompt is displayed:
If you enter a name that does not exist, the following prompt is displayed: