构建健壮的AJAX联系表单：状态管理与用户反馈指南

if(response.indexOf("Invalid email address!") || response.indexOf("Failed to send your message"))
{
    statusTxt.style.color = "#ff4c29"; // 红色
}
else{
    form.reset();
    setTimeout(() => {
        statusTxt.style.display = "none";
    }, 3000);   
}
statusTxt.innerText = response;

// 修正后的判断逻辑
if(response.indexOf("Invalid email address!") !== -1 || response.indexOf("Failed to send your message") !== -1)
{
    statusTxt.style.color = "#ff4c29"; // 错误时显示红色
}
else{
    // 成功时显示蓝色（或默认成功色），并重置表单
    statusTxt.style.color = "#1a66f1b1"; // 假设这是成功的蓝色
    form.reset();
    setTimeout(() => {
        statusTxt.style.display = "none";
    }, 3000);   
}
statusTxt.innerText = response;

const form = document.querySelector("form"),
      statusTxt = form.querySelector(".button-area span ");
const sendingMsgText = 'Sending your message...'; // 存储初始提示文本

form.onsubmit = (e) => {
   e.preventDefault();
   statusTxt.style.color = "#1a66f1b1"; // 设置为默认的发送中颜色
   statusTxt.style.display = "inline-block";
   statusTxt.innerText = sendingMsgText; // 在每次提交前，显式设置为“正在发送”

   let xhr = new XMLHttpRequest();
   xhr.open("POST", "message.php", true);
   xhr.onload = () =>{
        if(xhr.readyState == 4 && xhr.status == 200){
            let response = xhr.response;
            // 修正后的判断逻辑
            if(response.indexOf("Invalid email address!") !== -1 || response.indexOf("Failed to send your message") !== -1)
            {
                statusTxt.style.color = "#ff4c29";    // 错误时显示红色
            }
            else{
                statusTxt.style.color = "#1a66f1b1"; // 成功时显示蓝色
                form.reset();
                setTimeout(() => {
                    statusTxt.style.display = "none";
                }, 3000);   
            }
            statusTxt.innerText = response; // 更新为服务器响应
        }
   }
   let formData = new FormData(form);
   xhr.send(formData);
}

const form = document.querySelector("form"),
      statusTxt = form.querySelector(".button-area span ");
const sendingMsgText = 'Sending your message...'; // 定义发送中的提示文本

form.onsubmit = (e) => {
   e.preventDefault(); // 阻止表单默认提交行为

   // 1. 在每次提交前，重置状态文本为“正在发送”并显示
   statusTxt.innerText = sendingMsgText;
   statusTxt.style.color = "#1a66f1b1"; // 默认显示为蓝色（发送中）
   statusTxt.style.display = "inline-block";

   let xhr = new XMLHttpRequest();
   xhr.open("POST", "message.php", true); // 配置AJAX请求为POST方法，目标为message.php
   xhr.onload = () =>{
        // 确保请求完成且状态码为200 (OK)
        if(xhr.readyState === 4 && xhr.status === 200){
            let response = xhr.response; // 获取服务器响应

            // 2. 修正indexOf()的判断逻辑
            // 检查响应是否包含错误信息
            if(response.indexOf("Invalid email address!") !== -1 || response.indexOf("Failed to send your message") !== -1)
            {
                statusTxt.style.color = "#ff4c29"; // 错误时显示红色
            }
            else{
                // 成功处理：重置表单，并短暂显示成功信息后隐藏
                statusTxt.style.color = "#1a66f1b1"; // 成功时显示蓝色
                form.reset(); // 清空表单字段
                setTimeout(() => {
                    statusTxt.style.display = "none"; // 3秒后隐藏状态文本
                }, 3000);   
            }
            statusTxt.innerText = response; // 最终更新为服务器返回的具体消息
        }
   }
   let formData = new FormData(form); // 创建FormData对象以发送表单数据
   xhr.send(formData); // 发送AJAX请求
}