如何通过单个按钮实现两次表单提交以发送即时和延时短信

当然可以搞定！既然服务器不支持一次性提交两条短信指令，咱们用JavaScript手动触发两次独立的POST请求就好——先发送不带延时的message1，等第一个请求完成后，再发送带schedule字段的message2，完美实现单个按钮触发顺序提交。

具体实现步骤与代码 #

首先调整HTML结构，给关键元素加ID方便JS操作，同时把默认提交按钮改成普通按钮（避免触发原生表单提交行为）：

<div>
  To: <input id="phoneNumber" type="text" placeholder="请输入目标手机号" />
  <button type="button" onclick="sendTwoMessages()">发送两条短信</button>
</div>

<script>
// 公共配置信息
const API_URL = "https://api-mapper.clicksend.com/http/v2/send.php";
const API_KEY = "xxxxxxxxx";
const USERNAME = "xxxxxx";

async function sendTwoMessages() {
  const phoneNumber = document.getElementById("phoneNumber").value;
  if (!phoneNumber) {
    alert("请先输入目标手机号！");
    return;
  }

  try {
    // 第一步：发送即时短信（message1）
    const instantForm = new FormData();
    instantForm.append("key", API_KEY);
    instantForm.append("username", USERNAME);
    instantForm.append("to", phoneNumber);
    instantForm.append("message", "message1"); // 替换成你的即时短信内容

    console.log("正在发送即时短信...");
    const instantResp = await fetch(API_URL, {
      method: "POST",
      body: instantForm
    });
    const instantResult = await instantResp.text();
    console.log("即时短信提交结果:", instantResult);

    // 第二步：等即时短信提交完成后，发送延时短信（message2）
    const scheduledForm = new FormData();
    scheduledForm.append("key", API_KEY);
    scheduledForm.append("username", USERNAME);
    scheduledForm.append("to", phoneNumber);
    scheduledForm.append("message", "message2"); // 替换成你的延时短信内容
    scheduledForm.append("schedule", "2024-10-01 15:30:00"); // 替换成网关要求的延时时间格式

    console.log("正在发送延时短信...");
    const scheduledResp = await fetch(API_URL, {
      method: "POST",
      body: scheduledForm
    });
    const scheduledResult = await scheduledResp.text();
    console.log("延时短信提交结果:", scheduledResult);

    alert("两条短信已成功提交！");
  } catch (error) {
    console.error("发送过程出错:", error);
    alert("短信发送失败，可查看控制台详情排查问题！");
  }
}
</script>

关键细节提醒 #

• 用async/await强制保证两次请求按顺序执行：只有第一个请求完全处理完，才会发起第二个请求，避免并发请求可能带来的混乱。
• 每次请求单独创建FormData对象，分别携带对应字段，确保两次请求的独立性，不会互相干扰。
• 注意把schedule字段的值替换成短信网关要求的格式（比如具体的YYYY-MM-DD HH:MM:SS字符串），否则延时功能可能无法生效。

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