java ajax jQuery 登录_jQuery+ajax实现用户登录验证

本文实例为大家分享了jQuery+ajax实现用户登录验证的具体代码，供大家参考，具体内容如下

登录界面

*{

margin: 0;

padding: 0;

}

h3{

display: block;

width: 100%;

height: 50px;

text-align: center;

line-height: 50px;

background-color: cornflowerblue;

cursor: move;

}

#login{

width: 500px;

height: 270px;

margin: 0 auto;

position: absolute;

top: 50%;

left: 50%;

margin-left: -250px;

margin-top: -140px;

border: 1px solid #6495ED;

background-color: #FFFFFF;

display: block;

-moz-user-select: none;

-ms-user-select: none;

-webkit-user-select: none;

}

table{

margin-top: 50px;

position: absolute;

top: 50px;

left: 0;

width: 100%;

height: 150px;

text-align:center;

}

tr,td{

border: none;

}

tr{

height: 50px;

}

td{

padding: 0 5px 0 5px;

}

#bg{

width: 100%;

height: 100%;

background-color:rgba(0,0,0,0.2);

position: absolute;

top: 0;

left: 0;

}

span{

width: 100px;

height: 16px;

display:block;

margin-bottom: 12px;

}

body{

width: 100%;

height: 100%;

}

.inpt{

width: 300px;

height: 30px;

outline: none;

border: 1px solid darkturquoise;

}

.red{

color: red;

font-size: 12px;

}

.btn{

outline: none;

width: 60px;

height: 25px;

border: 1px solid #00CED1;

}

$(function () {

// 定义变量

var $mX;

var $mY;

var $move = false; // true是可以移动登录框

// 鼠标按下事件

$("h3").mousedown(function (event) {

$("#login").css("opacity",0.5); // 改变透明度

$move = true;

// 得到鼠标与登录框原点之间的距离

$mX = event.pageX-parseInt($("#login").css("left"));

$mY = event.pageY-parseInt($("#login").css("top"));

})

// 鼠标移动事件

$(document).mousemove(function (event) {

// 得到登录框要移动的量

var x = (event.pageX-$mX);

var y = (event.pageY-$mY);

console.log(x,y)

if($move){

if(x>0&&y>0){

$("#login").css("left",x+"px")

$("#login").css("top",y+"px")

}

}

}).mouseup(function () {

// 鼠标弹起事件

$move = false;

$("#login").css("opacity",1);

})

// 异步请求

$(":submit").click(function () {

$.ajax({

type:"get",

url:"data.php",

data:{"name":$("#user").val(),"password":$("#pwd").val()},

dataType:"json",

success:function (data) {

console.log("成功：",data);

/*if (data.usermsg==1&&data.pwdmsg==1) {

$(location).prop("href","index1.html");

} else{

$("span").text("用户名或密码错误").prop("class","red");

}*/

if (data.usermsg==1&&data.pwdmsg==1) {

$(location).prop("href","index1.html");

} else if(data.usermsg==0&&data.pwdmsg==0){

$("span").text("用户名或密码错误").prop("class","red");

} else if(data.usermsg==0&&data.pwdmsg==1){

$("span").text("该用户不存在").prop("class","red");

} else if(data.usermsg==1&&data.pwdmsg==0){

$("span").text("密码错误").prop("class","red");

}

},

error:function (err) {

console.log("失败",err);

}

})

})

$(":reset").click(function () {

$("span").text("");

})

})

欢迎登录！

用户名：
密&nbsp&nbsp&nbsp码：
&nbsp&nbsp&nbsp&nbsp&nbsp

$user="将军";

$password="1234321";

$username=$_GET["name"];

$pwd=$_GET["password"];

$usermsg=0;

$pwdmsg=0;

if($user==$username){

$usermsg=1;

}

if($password==$pwd){

$pwdmsg=1;

}

echo json_encode(array("usermsg"=>$usermsg,"pwdmsg"=>$pwdmsg));

?>

登录成功页面

登录成功

登录失败页面

登录失败

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。