This article focuses on the $.post method to implement Ajax
Login page Code
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" src= "Jquery-1.7.1.min.js" ></script>
<title>login</title>
<body>
<form action= "login.php" method= "POST" >
Login name: <input type= "text" name= "username" >
<div id= "Massage" ></div>
Password: <input type= "password" name= "password" >
<input type= "Submit" value= "Submission" >
<a href= "register.html" > Registration </a>
</form>
<script type= "Text/javascript" >
$ (function () {
$ (': input[name= "username"]). Change (function () {
txt=$ (': input[name= "username"]). Val ();
$.post ("ajax.php", {username:txt},function (result) {
$ ("#massage"). HTML (result);
});
});
});
</script>
</body>
Code for the ajax.php page
<?php
$mysqli = new mysqli (' localhost ', ' root ', ' ', ' Java ');
if ($username =$_post[' username ') {
$result = $mysqli->query ("SELECT * from User WHERE username=". "' $username ' ");
$rs 1= $result->fetch_row ();
if ($rs 1) {
$arr = "<font color= ' Red ' > user already exists </font>";
Echo $arr;
}
else{
$arr = "<font color= ' green ' > This user is available </font>";
Echo $arr;
}
}
Register page code
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" src= "Jquery-1.7.1.min.js" ></script>
<title>register</title>
<body>
<form action= "register.php" method= "POST" >
Login name: <input type= "text" name= "username" >
<div id= "Massage" ></div>
Password: <input type= "password" name= "password" >
Repeat Password: <input type= "password" name= "Password2" >
<div id= "Massage1" ></div>
<input type= "Submit" value= "Submission" >
<a href= "index.html" > Login </a>
</form>
<script type= "Text/javascript" >
$ (function () {
$ (': input[name= "username"]). Change (function () {
txt=$ (': input[name= "username"]). Val ();
$.post ("ajax.php", {username:txt},function (result) {
$ ("#massage"). HTML (result);
});
});
$ (': Input[name= "Password2"]). Change (function () {
txtpass=$ (': input[name= "password"]). Val ();
txtpass2=$ (': Input[name= "Password2"]). Val ();
if (TXTPASS&&TXTPASS2) {
$.post ("regajax.php", {password:txtpass,password2:txtpass2},function (result) {
$ ("#massage1"). HTML (result);
});
}
});
$ (': input[name= "password"]). Change (function () {
txtpass=$ (': input[name= "password"]). Val ();
txtpass2=$ (': Input[name= "Password2"]). Val ();
if (TXTPASS&&TXTPASS2) {
$.post ("regajax.php", {password:txtpass,password2:txtpass2},function (result) {
$ ("#massage1"). HTML (result);
});
}
});
});
</script>
</body>
regajax.php Code
<?php
if ($_post[' password ']) {
if ($_post[' Password2 ']) {
if ($_post[' password ']!=$_post[' Password2 ')} {
$arr = "<font color= ' red ' > two times Password input inconsistent </font>";
Echo $arr;
}
}
}
The above is the Code section
The points to note are
The code for the event-triggered execution is placed in an empty $ (function () {});
1.$ (function () {
$ (': input[name= "username"]). Change (function () {
txt=$ (': input[name= "username"]). Val ();
$.post ("ajax.php", {username:txt},function (result) {
$ ("#massage"). HTML (result);
});
});
});
2.
$ (': input[name= "username"]). Change This is the representation of one of the label's name properties
3. $.post (Sent to the address, the parameter is sent {key:values,key2:values2}, the callback function functions (arbitrarily using a parameter to represent the returned data) {return data after the execution of the function statement})
4.$arr = "<font color= ' green ' > This user is available </font>";
Echo $arr;
Returns the HTML format directly echo even returned
If you return a JSON format, you need to use echo json_code ($arr);
Ajax implementation of jquery login verification