HTML表单提交后浏览器意外下载0MB文件的解决方案

<form id="myForm" action="https://hooks.nabu.casa/verylongstringofcharacterforawebhook" method="POST">
    <input name="name" value="-------">
    <button type="submit">Add to favorites</button>
</form>

<script>
    document.getElementById('myForm').addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单的默认提交行为
        console.log('表单默认提交已被阻止。');
        // 在这里调用自定义的提交函数
        submitFormWithJavaScript(this);
    });

    function submitFormWithJavaScript(formElement) {
        // ... 后续的异步提交逻辑
    }
</script>

function submitFormWithJavaScript(formElement) {
    const formData = new FormData(formElement); // 获取表单数据
    const actionUrl = formElement.action;       // 获取表单的action URL

    fetch(actionUrl, {
        method: 'POST', // 或 'GET'，取决于你的表单方法
        body: formData  // FormData对象会自动设置Content-Type为multipart/form-data
        // 如果后端期望JSON，可以使用：
        // headers: {
        //     'Content-Type': 'application/json'
        // },
        // body: JSON.stringify(Object.fromEntries(formData))
    })
    .then(response => {
        // 检查HTTP响应状态码
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        // 根据服务器响应类型处理数据
        // 例如，如果服务器返回JSON：
        // return response.json();
        // 如果服务器不返回任何内容（如Webhook），则可以直接处理成功状态
        return response.text(); // 或者 response.blob(), response.arrayBuffer()
    })
    .then(data => {
        console.log('表单提交成功！服务器响应：', data);
        // 在这里更新UI，例如显示一个成功消息
        alert('添加到收藏夹成功！');
    })
    .catch(error => {
        console.error('表单提交失败：', error);
        // 在这里处理错误，例如显示一个错误消息
        alert('操作失败，请重试。');
    });
}

function submitFormWithJavaScript(formElement) {
    const formData = new FormData(formElement);
    const actionUrl = formElement.action;

    const xhr = new XMLHttpRequest();
    xhr.open('POST', actionUrl); // 设置请求方法和URL

    // 监听请求状态变化
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            console.log('表单提交成功！服务器响应：', xhr.responseText);
            alert('添加到收藏夹成功！');
            // 处理成功响应
        } else {
            console.error('表单提交失败！状态码：', xhr.status, '响应：', xhr.responseText);
            alert('操作失败，请重试。');
            // 处理错误响应
        }
    };

    // 监听网络错误
    xhr.onerror = function() {
        console.error('网络请求错误。');
        alert('网络请求错误，请检查您的网络连接。');
    };

    xhr.send(formData); // 发送数据
}