JavaScript/HTML向服务器发送POST请求无响应求助

核心问题及解决步骤 #

• 阻止表单默认提交行为
  你的validateMailList函数在验证通过后未返回false，导致表单会执行默认的提交跳转，页面刷新后fetch的异步回调还没来得及执行就被中断。需要在函数末尾添加return false，彻底阻止表单默认行为。

• 修复邮箱验证逻辑漏洞
  当前邮箱格式验证不通过时，仅弹出提示但仍会继续执行fetch请求和表单提交，需在该分支添加return false，终止后续流程。

• 修正fetch语法错误
  response. json()中间的空格属于语法错误，应改为response.json()，否则会导致回调函数执行失败，无法触发提示弹窗。

• 替换无效请求URL
  fetch('//url')中的//url是无效占位符，必须替换为实际的服务器API端点地址。

修改后的完整JavaScript代码 #

function validateMailList() {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    let x = document.forms["mailList"]["name"].value;
    if (x == "") {
        alert("NAME MUST NOT BE BLANK ");
        return false;
    }
    let y = document.forms["mailList"]["email"].value;
    if (y == "") {
        alert("EMAIL MUST NOT BE BLANK ");
        return false;
    }
    if (!emailRegex.test(y)){
        alert("EMAIL ADDRESS IS INVALID.");
        return false; // 新增：阻止后续流程
    }

    const data = {
        "name" : x,
        "email" : y
    }

    fetch('https://your-actual-server-endpoint.com', { // 替换为真实服务器地址
        method: "post",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
    })
    .then ((response) => {
        if(response.status === 201){
            alert("Thank you. You are now signed up for our mailing list");
            return response.json(); // 修复空格问题
        }else if(response.status === 400){
            alert("INVALID DATA WAS SENT TO THE SERVER.");
        }else{
            alert("Sorry, something went wrong.");
        }
    })
    .catch((error) => {
        // 新增：捕获网络或请求错误
        alert("Request failed: " + error.message);
    });

    return false; // 新增：阻止表单默认提交
}

额外调试建议 #

• 打开浏览器开发者工具（F12）的控制台标签，查看是否有语法错误或请求失败的详细信息，这是快速排查前端问题的关键。
• 可给表单添加novalidate属性，禁用浏览器默认验证，避免与自定义验证逻辑冲突：

  <form name="mailList" action="MailingList.html" onsubmit="return validateMailList()" method="POST" novalidate>
  

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