从HTML表单静默发送WhatsApp消息：限制与后端解决方案

<form>
    <input type="text" id="mssgbox" placeholder="输入您的消息" />
    <button type="button" onclick="sendMessage()">发送</button>
</form>

<script>
function sendMessage() {
    let typedText = document.querySelector('#mssgbox').value;
    // 注意：这种方式会导致页面重定向
    window.location.href = 'https://api.whatsapp.com/send?phone=2347034907106&text=' + encodeURIComponent(typedText);
}
</script>

<form id="whatsappForm">
    <input type="text" id="mssgbox" placeholder="输入您的消息" required />
    <button type="submit">发送消息</button>
</form>

<script>
document.getElementById('whatsappForm').addEventListener('submit', async function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    let typedText = document.getElementById('mssgbox').value;

    try {
        const response = await fetch('/send-whatsapp-message', { // 发送请求到你的后端API
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                message: typedText,
                phoneNumber: '2347034907106' // 或者从表单中获取目标号码
            })
        });

        if (response.ok) {
            alert('消息已发送成功！');
            document.getElementById('mssgbox').value = ''; // 清空输入框
        } else {
            const errorData = await response.json();
            alert('消息发送失败: ' + (errorData.error || '未知错误'));
        }
    } catch (error) {
        console.error('发送请求时发生错误:', error);
        alert('网络错误或服务器无响应。');
    }
});
</script>

// 这是一个概念性的后端代码示例，实际实现需要集成WhatsApp Business API SDK或HTTP请求
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const PORT = 3000;

app.use(bodyParser.json());

// 假设这里是你的WhatsApp Business API集成逻辑
async function sendWhatsAppMessageViaAPI(phoneNumber, message) {
    // 实际这里会调用WhatsApp Business API的SDK或发送HTTP请求
    // 例如使用 axios 或 fetch (node-fetch) 向 WhatsApp API 端点发送 POST 请求
    console.log(`尝试向 ${phoneNumber} 发送消息: "${message}"`);
    // 模拟API调用成功或失败
    return new Promise(resolve => {
        setTimeout(() => {
            if (Math.random() > 0.1) { // 90% 成功率
                resolve({ success: true, messageId: 'msg_' + Date.now() });
            } else {
                resolve({ success: false, error: 'WhatsApp API调用失败' });
            }
        }, 1000);
    });
}

app.post('/send-whatsapp-message', async (req, res) => {
    const { message, phoneNumber } = req.body;

    if (!message || !phoneNumber) {
        return res.status(400).json({ error: '消息内容和手机号码是必需的。' });
    }

    try {
        const apiResponse = await sendWhatsAppMessageViaAPI(phoneNumber, message);
        if (apiResponse.success) {
            res.status(200).json({ status: 'success', message: '消息已成功发送', messageId: apiResponse.messageId });
        } else {
            res.status(500).json({ status: 'error', error: apiResponse.error || 'WhatsApp API调用失败' });
        }
    } catch (error) {
        console.error('后端处理错误:', error);
        res.status(500).json({ status: 'error', error: '服务器内部错误' });
    }
});

app.listen(PORT, () => {
    console.log(`后端服务运行在 http://localhost:${PORT}`);
});