html css前端案例案例学习,jQuery实现登录案例

html代码：

实例

html>

jQuery实现登录案例

form{

width: 500px;

height: 500px;

margin: auto;

}

用户登录

邮箱：

密码：

登录

$('button').on('click',function () {

//            1.提交地址

var URL='check.php?m=login'

//            2.要提交的数据

var data={

'email':$('#email').val(),

'password':$('#password').val()

}

//            3.成功回调函数

var success=function (res) {

if(res=='1'){

$('#tips').text('登录成功，正在跳转...')

setTimeout(function () {

location.href='index.php'

},2000)

}else{

$('#tips').text('邮箱密码错误，请重新输入...')

$('#email').focus()

setTimeout("tips.innerHTML='' ",2000)

}

}

//            4.设置返回数据格式

var dataTYPE='json'

//            5.调用全面函数$.post()

$.post(URL,data,success,dataTYPE)

return false

})

运行实例 »

点击 "运行实例" 按钮查看在线实例

chech.php代码：

if($_GET['m'] == 'login'){

if($_POST['email']=='admin@php.cn'&& $_POST['password']=='123456'){

echo '1';

}else{

echo '0';

}

}

index.php代码：

header("content-type:text/html;charset=utf8");

echo '

登录成功

';

手抄：

运行效果图：