给开发版设备写一个发送短信的WEB页面
文章正文
发布时间：2025-11-16 23:42
页面表单元素与接口参数一一对应，其中：
卡槽选择对应p1（1 或 2，默认选中卡槽 2）
接收号码对应p2（如示例中的 10001）
短信内容对应p3（如示例中的 “查话费”）
token、cmd为固定参数，tid自动生成唯一时间戳
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双卡短信发送工具</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 25px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea, select {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 5px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
padding: 10px;
border-radius: 4px;
}
.success {
background-color: #dff0d8;
color: #3c763d;
}
.error {
background-color: #f2dede;
color: #a94442;
}
</style>
</head>
<body>
<div class="container">
<h1>双卡设备短信发送</h1>
<form id="smsForm">
<div class="form-group">
<label for="slot">选择卡槽（p1）：</label>
<select id="slot" required>
<option value="1">卡槽1</option>
<option value="2" selected>卡槽2</option>
</select>
<small>数值型，1表示卡槽1，2表示卡槽2</small>
</div>
<div class="form-group">
<label for="phone">接收号码（p2）：</label>
<input type="text" id="phone" placeholder="例如：10001" required>
<small>字符型，目标手机号码</small>
</div>
<div class="form-group">
<label for="content">短信内容（p3）：</label>
<textarea id="content" rows="3" placeholder="例如：查话费" required></textarea>
<small>字符型，需发送的短信内容</small>
</div>
<button type="submit">发送短信</button>
</form>
<div id="result"></div>
</div>
<script>
document.getElementById('smsForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
// 获取表单参数
const slot = document.getElementById('slot').value;
const phone = document.getElementById('phone').value;
const content = document.getElementById('content').value;
// 生成唯一tid（使用时间戳确保唯一性）
const tid = Date.now();
// 固定参数
const token = '3f4bffa77257d243875d0a5a80635934';
const cmd = 'sendsms';
// 构建请求URL（对短信内容进行URL编码，避免特殊字符问题）
const url = `?token=${token}&cmd=${cmd}&tid=${tid}&p1=${slot}&p2=${phone}&p3=${encodeURIComponent(content)}`;
// 发送请求
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('网络请求失败');
}
return response.json();
})
.then(data => {
const resultDiv = document.getElementById('result');
if (data.code === 0) {
resultDiv.textContent = '短信发送成功！';
resultDiv.className = 'success';
} else {
resultDiv.textContent = `发送失败：${data.msg || '未知错误'}`;
resultDiv.className = 'error';
}
})
.catch(error => {
const resultDiv = document.getElementById('result');
resultDiv.textContent = `请求错误：${error.message}（可能是URL拼写问题或网络原因，请检查）`;
resultDiv.className = 'error';
});
});
</script>
</body>
</html>
