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

来源：互联网发布：java 防止xss攻击编辑：程序博客网时间：2024/06/05 23:05

什么是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>

阅读全文

0 0