如何阻止Fetch POST请求重定向并获取API返回的ID？

你的代码存在两个核心问题导致重定向无法阻止，同时无法正确获取ID：

1. 事件绑定错误：
   原代码中form.addEventListener('submit', handleSubmit());是直接执行了handleSubmit函数，而非将函数作为事件处理器绑定。这会导致函数在页面加载时就执行，而非表单提交时触发，自然无法正确阻止默认行为。

2. 响应解析与变量存储：
   需要正确解析API返回的JSON数据，从中提取服务器生成的ID并存储到变量中。

修正后的完整代码 #

const form = document.querySelector('form');
// 移除括号，传递函数引用而非执行结果
form.addEventListener('submit', handleSubmit);

async function handleSubmit(event) {
    // 必须放在函数最顶部，优先阻止表单默认提交行为
    event.preventDefault();
    
    const url = new URL(form.action);
    const formData = new FormData(form);

    const fetchOptions = {
        method: form.method,
        body: formData,
    };

    try {
        const response = await fetch(url, fetchOptions);
        // 解析响应为JSON格式
        const responseData = await response.json();
        // 从响应数据中提取ID，假设返回的字段名为id，根据实际API调整
        const generatedId = responseData.id;
        
        console.log('服务器生成的ID:', generatedId);
        // 这里可以将ID用于后续逻辑，比如存储到全局变量或页面元素中
    } catch (error) {
        console.error('上传或解析响应出错:', error);
    }
}

关键说明 #

• event.preventDefault()必须放在函数第一行，确保优先阻止表单的默认提交（即页面跳转）行为。
• 用await response.json()解析API返回的JSON数据，根据实际API的响应结构调整提取ID的字段名（比如如果API返回{"fileId": "xxx"}，就改为responseData.fileId）。
• 加入try/catch块处理网络请求或解析过程中可能出现的错误，避免代码崩溃。

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