获取验证码的代码通常涉及到后端服务器和前端JavaScript的配合。这里提供一个简单的示例,前端使用JavaScript发送请求到后端服务器获取验证码,并显示在页面上。请注意,这只是一个基本示例,实际开发中需要考虑安全性和其他因素。
假设后端提供了一个API接口/api/get-captcha 来获取验证码,并且返回的是一个包含验证码的字符串,前端可以使用Ajax来调用这个接口,以下是使用JavaScript和Ajax获取验证码的代码示例:

HTML部分(假设有一个显示验证码的容器):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取验证码示例</title>
</head>
<body>
<div id="captcha-container"></div> <!-- 显示验证码的容器 -->
<button id="get-captcha-btn">获取验证码</button> <!-- 获取验证码按钮 -->
<script src="https://www.qq959.com/static/image/lazy.gif" class="lazy" original="https://www.qq959.com/static/image/nopic320.png" <!-- JavaScript代码 -->
</body>
</html>JavaScript部分(script.js):

document.getElementById(’get-captcha-btn’).addEventListener(’click’, function() {
// 发送Ajax请求获取验证码
const xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open(’GET’, ’/api/get-captcha’); // 设置请求方法和URL(假设后端提供的API接口)
xhr.setRequestHeader(’Content-Type’, ’application/json’); // 设置请求头(根据实际情况设置)
xhr.onreadystatechange = function() { // 处理响应状态变化事件
if (xhr.readyState === XMLHttpRequest.DONE) { // 如果请求已完成(状态码为4)
if (xhr.status === 200) { // 如果响应状态码为200(成功)
const captcha = xhr.responseText; // 获取返回的验证码字符串
document.getElementById(’captcha-container’).innerText = captcha; // 显示验证码到容器内
} else { // 如果响应状态码不是200(例如错误或未找到等)
console.error(’请求失败,状态码:’, xhr.status); // 输出错误信息到控制台
}
}
};
xhr.send(); // 发送请求
});这只是一个简单的示例,实际开发中还需要考虑其他因素,如错误处理、安全性等,后端服务器也需要提供相应的接口来生成和返回验证码。





