AJAX的初级使用及登录注册案例

什么是AJAX

ajax 即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）， 也就是无刷新数据读取。

http 请求

首先需要了解 http 请求的方法（GET 和 POST）。

GET 用于获取数据。GET 是在 URL 中传递数据，它的安全性低，容量低。

POST 用于上传数据。POST 安全性一般，容量几乎无限。

$.ajax({
url: 'http://localhost:8080/user/login',
type: 'post',
data: $('#login_form').serialize(),
dataType: 'text',
success: function (state_code) {
if (state_code =='1') {
myModal.html('');
sessionStorage.setItem('userId', $('#telephone').val())
location.href = './../index.html'

} else if (state_code == '2') {
// alert('用户名或密码错误')
modal.html('用户名或密码错误')
} else if (state_code == '3') {
// alert('用户名不存在')
modal.html('用户名不存在')
} else {
location.href = './404.html';
}
},
error: function (err) {

}
})

登录注册js前端验证代码

$(function () {
var tel = $('#telephone');
var pass = $('#password');
var pass_confirm=$('#password_confirm')
var myModal = $('#myModal')
var modal = $('#modal')

tel.blur(function () {
checkTelephone();
});
tel.keypress(function (event) {
if (event.keyCode == 13) {
checkTelephone();
}
})
pass.blur(function () {
checkPassword()
})
pass.keypress(function (event) {
if (event.keyCode == 13) {
checkPassword();
}
});
pass_confirm.blur(function () {
checkPasswordConfirm();
});
pass_confirm.keypress(function (event) {
if (event.keyCode == 13) {
checkPasswordConfirm();
$('#btn_login').focus()
}
});
$('#btn_login').click(function () {
if (checkTelephone() && checkPassword()) {

$.ajax({
url: 'http://localhost:8080/user/login',
type: 'post',
data: $('#login_form').serialize(),
dataType: 'text',
success: function (state_code) {
if (state_code =='1') {
myModal.html('');
sessionStorage.setItem('userId', $('#telephone').val())
location.href = './../index.html'

} else if (state_code == '2') {
// alert('用户名或密码错误')
modal.html('用户名或密码错误')
} else if (state_code == '3') {
// alert('用户名不存在')
modal.html('用户名不存在')
} else {
location.href = './404.html';
}
},
error: function (err) {

}
})

}
})
$('#btn_regist').click(function () {
if (checkTelephone() && checkPassword()&&checkPasswordConfirm()) {

$.ajax({
url: 'http://localhost:8080/user/register',
type: 'post',
data: $('#login_form').serialize(),
dataType: 'text',
success: function (state_code) {
if (state_code =='6') {
myModal.html('');
sessionStorage.setItem('userId',$('#telephone').val())
location.href = './../index.html'

} else if (state_code == '7') {
modal.html('注册失败')
} else if (state_code == '5') {
modal.html('该用户已存在')
} else {
location.href = './404.html';
}
},
error: function (err) {

}
})

}
})

});

function checkTelephone() {
var tel = $('#telephone');
var err_tel = $('#error_telephone')
if (tel.val().trim()) {
var reg = /^1(3|4|5|7|8)\d{9}$/;
if (reg.test(tel.val())) {
err_tel.html('');
$('#password').focus();
return true;
} else {
err_tel.html('你输入的号码格式不正确！')
return false;
}
} else {
err_tel.html('号码不能为空！');
return false;
}
}

function checkPassword() {
var pass = $('#password');
var err_psw = $('#error_password');
if (pass.val().trim() && pass.val().trim().length >= 6) {
err_psw.html('');
$('#btn_login').focus();
return true;
} else {
err_psw.html('密码长度最小6位');
return false;
}
}
function checkPasswordConfirm() {
if(checkPassword()){
if($('#password').val().trim()==$('#password_confirm').val().trim())
{$('#error_password_confirm').html('');
return true;
}else {
$('#error_password_confirm').html('两次输入不一致')
}
}
}

回复码

登陆成功：1

用户名或密码错误：2

用户不存在：3

数据库异常：e004

注册 该用户已经存在：5

注册成功：6

注册失败：7

注册 其他失败：e006

网络连接失败：e404

<form class="form-horizontal" id="login_form">
<div class="form-group">
<label for="telephone" class="col-sm-2 control-label" >Telephone</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="telephone" name="telephone" value="13307099117" placeholder="Telephone">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10 text-warning" id="error_telephone">
error
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
</div>
</form>