如何使用JavaScript fetch实现Mailchimp邮件订阅无跳转提交功能

• 你当前的实现误用了fetch：Mailchimp的公开订阅接口未开启CORS配置，普通跨域fetch请求会直接被浏览器拦截。你之前的jQuery代码实际运行的是JSONP请求（URL里的c=?是jQuery JSONP的标识），jQuery会自动创建script标签加载接口地址，避开同源策略限制，而原生fetch本身不支持JSONP。
• 多余的请求头配置：GET请求没有请求体，不需要设置Content-Type: application/json，这个头会触发CORS预检请求，进一步导致请求失败。
• 手动拼接参数的风险：你手动拼接表单参数、处理@符号编码的方式极易出错，而且如果后续表单增加字段就要改拼接逻辑，可维护性很差。
• 参数格式错误：JSONP需要在c参数里传入全局回调函数名，你直接留着c=?不会被自动替换，服务端返回的内容无法被正确执行。

直接用原生JS实现JSONP逻辑即可，不需要引入任何库，代码如下：

function register(form) {
  // 自动序列化表单参数，无需手动拼接
  const formData = new FormData(form);
  const searchParams = new URLSearchParams(formData);
  
  // 生成唯一的回调函数名，避免全局冲突
  const callbackName = `mc_callback_${Date.now()}_${Math.random().toString(36).slice(2)}`;
  
  // 拼接完整请求URL
  let url = form.getAttribute('action').replace('c=?', `c=${callbackName}`);
  url += `&${searchParams.toString()}`;
  // 追加防缓存参数，和原有jQuery逻辑对齐
  url += `&_=${Date.now()}`;

  // 注册全局回调函数，接收服务端返回结果
  window[callbackName] = function(data) {
    // 请求完成后清理全局函数和script标签，避免内存泄漏
    delete window[callbackName];
    document.body.removeChild(script);

    // 业务逻辑和原有jQuery实现保持一致
    if (data.result !== "success") {
      // 错误处理示例，可按需修改
      document.getElementById('mce-error-response').textContent = data.msg;
      document.getElementById('mce-error-response').style.display = 'block';
      document.getElementById('mce-success-response').style.display = 'none';
    } else {
      // 成功处理示例，可按需修改
      document.getElementById('mce-success-response').textContent = '订阅成功，请注意查收确认邮件';
      document.getElementById('mce-success-response').style.display = 'block';
      document.getElementById('mce-error-response').style.display = 'none';
      form.reset();
    }
  };

  // 创建script标签发起JSONP请求
  const script = document.createElement('script');
  script.src = url;
  // 网络错误处理
  script.onerror = function() {
    delete window[callbackName];
    document.body.removeChild(script);
    alert("Could not connect to the registration server. Please try again later.");
  };

  document.body.appendChild(script);
}

给表单添加提交事件绑定，阻止默认跳转即可生效：

document.getElementById('mc-embedded-subscribe-form').addEventListener('submit', function(e) {
  e.preventDefault();
  register(this);
});

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