如何从HTML表单后台直接发送消息至WhatsApp且不跳转？

首先明确：纯前端无法实现后台发送，因为WhatsApp的公开接口不支持前端直接调用（存在跨域和凭证泄露风险），必须依赖后端服务来完成消息发送。下面是具体实现方案：

核心思路 #

前端负责收集用户输入的文本，通过异步请求把文本传给自己的后端接口；后端接口调用WhatsApp官方API或第三方服务，完成消息的后台发送，全程不会跳转页面。

具体实现步骤 #

1. 改造前端代码 #

保留原表单结构，修改send()函数，用异步请求替代页面跳转：

<form> 
  <input type="text" id="mssgbox" />
  <button onclick="send()"> Send </button>
</form>

<script>
function send(){
  let typedText = document.querySelector('#mssgbox').value;
  if(!typedText.trim()){
    alert('请输入消息内容');
    return;
  }

  // 发送请求到后端接口
  fetch('/send-whatsapp', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ text: typedText }),
  })
  .then(response => response.json())
  .then(data => {
    alert(data.success ? '消息已发送' : '发送失败，请重试');
    document.querySelector('#mssgbox').value = ''; // 清空输入框
  })
  .catch(() => {
    alert('网络出错，发送失败');
  });
}
</script>

2. 后端实现（以Node.js/Express为例） #

需要先申请WhatsApp Business Platform账号，获取access token和phone number ID（这是官方合法发送消息的必要凭证）。然后编写后端接口：

const express = require('express');
const axios = require('axios');
const app = express();

// 解析JSON请求体
app.use(express.json());

// 替换为你的WhatsApp Business API凭证
const WHATSAPP_ACCESS_TOKEN = '你的Access Token';
const PHONE_NUMBER_ID = '你的手机号ID';
const TARGET_PHONE = '2347034907106'; // 目标接收手机号

// 处理前端的发送请求
app.post('/send-whatsapp', async (req, res) => {
  const { text } = req.body;
  try {
    // 调用WhatsApp官方发送消息API
    await axios.post(
      `https://graph.facebook.com/v18.0/${PHONE_NUMBER_ID}/messages`,
      {
        messaging_product: 'whatsapp',
        to: TARGET_PHONE,
        text: { body: text }
      },
      {
        headers: {
          'Authorization': `Bearer ${WHATSAPP_ACCESS_TOKEN}`,
          'Content-Type': 'application/json'
        }
      }
    );
    res.json({ success: true });
  } catch (error) {
    console.error('发送失败:', error.response?.data || error.message);
    res.json({ success: false });
  }
});

// 启动服务器
app.listen(3000, () => {
  console.log('后端服务运行在 http://localhost:3000');
});

3. 替代方案：使用第三方服务 #

如果不想折腾官方API，也可以用Twilio、MessageBird这类第三方消息服务，它们封装了WhatsApp发送能力，只需要注册账号获取API密钥，后端调用对应的接口即可，逻辑和上面一致，只是API地址和参数略有不同。

注意事项 #

• 所有API凭证（access token、密钥等）必须存在后端，绝对不能暴露在前端代码中，否则会被滥用。
• 发送消息必须符合WhatsApp的合规要求，比如确保接收用户同意接收你的消息，避免发送垃圾信息导致账号被封禁。

内容的提问来源于stack exchange，提问作者Sagir SGR