蓝色机械设备pbootcms网站模
【自适应双语】红色科技
2023年二次开发版运势测算
【自适应】在线知识付费以下是一个使用 HTML 和 JavaScript 调用后端短信接口发送验证码的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>发送短信验证码</title>
</head>
<body>
<form>
<label for="mobile">手机号码：</label>
<input type="text" id="mobile" name="mobile"><br>
<label for="code">验证码：</label>
<input type="text" id="code" name="code"><br>
<button type="button" onclick="sendCode()">发送验证码</button>
</form>
<script>
function sendCode() {
var mobile = document.getElementById('mobile').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/send_code.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var result = JSON.parse(xhr.responseText);
if (result.code === 0) {
alert('验证码发送成功');
} else {
alert('验证码发送失败：' + result.message);
}
} else {
alert('验证码发送失败');
}
}
};
xhr.send('mobile=' + encodeURIComponent(mobile));
}
</script>
</body>
</html>
在上面的代码中，我们首先创建了一个表单，包含了手机号码和验证码的输入框，以及一个发送验证码的按钮。当用户点击发送验证码按钮时，我们使用 JavaScript 发送了一个 POST 请求到 /send_code.php 接口，并将手机号码作为请求参数发送过去。接着，我们处理了短信发送结果，如果发送成功，则弹出“验证码发送成功”的提示框，否则弹出“验证码发送失败”的提示框。需要注意的是，这里的 /send_code.php 接口需要自己实现，可以使用 PHP 或其他后端语言编写。