JS的异步交互登陆

AJAX 的 了解

AJAX 并非编程语言。

AJAX 仅仅组合了：
浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
JavaScript 和 HTML DOM（显示或使用数据）
Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。
可能你看到上面所说的会一脸懵逼，但是说白了AJAX就是跟后台异步数据传输，提高安全性。

AJAX代码

function change_pass() {
        var id = $('#id').val();              //账号
        var password = $('#password ').val();            //密码

        if (id === '' || password === '') {
            alert('文本框内容不能为空！');
            return false;
        }
        $.ajax({
            type: 'POST',
            url: './change_pass.php',
            data: {
                id: id.toString(),
                password : password .toString(),
            },
            success: function (tea_pass) {
                var data = JSON.parse(tea_pass);
                if (data.state_value === '1') {
                    alert('登陆成功');
                     location.reload();
                } else if (data.state_value === '2') {
                    alert('用户名或密码不对');
                }
            },
            error: function (tea_pass) {
                alert("error");
            }
        });
    }

PHP后台代码

//获取并赋值
$id = $_POST['id'];
$password = $_POST['password'];
//
$pass = new land_account();//数据库封装实例化
$stmt = $pass->change_pass($id,$password);
if ($stmt){
    $returnValue= array('state_value' => '1');
}else{
    $returnValue= array('state_value' => '2');
}
echo json_encode($returnValue);

如果$$stmt$值不为空，表示在数据库能查到这条数据，返回一个JSON格式的数组值为1，JS解析JSON格式收到为1的值则提示登陆成功。
否则返回一个JSON格式的数组值为2，JS解析JSON格式收到为2的值则提示用户名或密码不对。