Ajax implementation of jquery login verification

Source: Internet
Author: User

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&AMP;&AMP;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&AMP;&AMP;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

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.