AJAX无刷新表单验证总结

abstract：通过对AJAX无刷新表单验证页面的实现，对AJAX异步请求后台数据有了进一步的了解，并尝试着写简单的php代码进行后台交互，对通过AJAX实现json数据的提交和返回有了进一步的认识。代码如下：前端验证页面：<!DOCTYPE html> <html> <head> <meta chars

通过对AJAX无刷新表单验证页面的实现，对AJAX异步请求后台数据有了进一步的了解，并尝试着写简单的php代码进行后台交互，对通过AJAX实现json数据的提交和返回有了进一步的认识。

代码如下：

前端验证页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<h3>用户登录</h3>
<form>
    <p>用户名: <input type="text" name="username" id="username"></p>
    <p>密码: <input type="password" name="password" id="password"></p>
    <p><button type="button" id="btnSub">提交</button></p>
</form>
<script>
    let btn = document.getElementById("btnSub");
    btn.onclick = function () {
        //1.创建xhr对象
        let xhr = new XMLHttpRequest();

        //2.监听响应状态
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4) { // 准备就绪
                // 判断响应结果:
                if (xhr.status === 200) {
                    //响应成功
                    let jsonData=JSON.parse(xhr.responseText);

                    //根据status判断返回结果。1为成功，0为失败
                    if(jsonData.status==='1'){
                     $('p:last').after('<p style="color:red">'+jsonData.Msg+'</p>').next().slideUp(3000);
                     btn.disabled=true;//成功需要禁用按钮，防止验证成功后继续点击。后续可做跳转页面。
                    }
                    else if(jsonData.status==='0'){
                     $('p:last').after('<p style="color:red">'+jsonData.Msg+'</p>').next().slideUp(3000);
                     btn.disabled=false;//验证失败需要重新解除按钮禁用
                     //清空内容，并把焦点停在用户名的输入框中
                     $('#username').val("");
                     $('#password').val("");
                     $('#username').focus();
                    }
                } else {
                    // 响应失败,并根据响应码判断失败原因
                    alert('响应失败'+xhr.status);
                }
            } else {
                // 请求等待
            }

        }

        //3.设置请求参数
        xhr.open('post','check.php',true);

        //4. 设置头信息,将内容类型设置为表单提交方式
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        //4.发送请求
        let data = {
          username:  document.getElementById('username').value,
          password:  document.getElementById('password').value
        };
        let data_json=JSON.stringify(data);
        xhr.send('data='+data_json);
    }
</script>
</body>
</html>

check.php：

<?php
// var_dump($_POST['data']);
$user=json_decode($_POST['data']);

// echo $user->username;
// echo $user->password;

$arr=[];

if($user->username==="111"&&$user->password==="222"){
	$arr=['status'=>'1','Msg'=>'登录成功'];
}
else{
	$arr=['status'=>'0','Msg'=>'用户名或密码错误'];
}

echo json_encode($arr);

AJAX无刷新表单验证总结

Popular Entries