【ajax实战02】数据管理网站—验证码登录

// 假设我们有一个表单用于用户输入用户名和密码，以及一个用于验证码的输入框
// HTML 部分
<form id="loginForm">
    用户名: <input type="text" id="username">
    密码: <input type="password" id="password">
    验证码: <input type="text" id="captcha">
    <input type="submit" value="登录">
</form>
 
// JavaScript 部分
document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
 
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    var captcha = document.getElementById('captcha').value;
 
    // 使用 AJAX 进行验证码验证
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/captcha_verify', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            if (response.success) {
                // 验证码验证通过后执行登录操作
                login(username, password);
            } else {
                alert('验证失败，请重新输入');
            }
        }
    };
    xhr.send('captcha=' + captcha);
});
 
function login(username, password) {
    // 这里应该是发送登录请求的代码
    // ...
}

这段代码展示了如何在表单提交事件中使用AJAX来验证验证码，并在验证通过后执行登录操作。这是一个简化的例子，实际应用中需要根据后端API的具体要求进行调整。