表单提交后如何捕获直接返回浏览器的换行分隔服务器响应？

嘿，这个问题我熟！要捕获这种直接返回换行分隔字符串的服务器响应，核心是不要让浏览器执行默认的表单提交跳转，而是用异步请求接管提交流程，这样就能拿到响应内容并按需处理了。下面给你两种实用的方案：

Fetch是ES6+的异步请求API，语法简洁且支持Promise，适合大多数现代浏览器：

<html>
<form id="paymentForm" method='Post' action='https://www.paymentsgateway.net/cgi-bin/posttest.pl'>
  <input type='hidden' name='pg_merchant_id' value='191620'/>
  <!-- 补充你的其他表单字段 -->
  <button type="submit">提交交易</button>
</form>

<script>
const form = document.getElementById('paymentForm');

// 监听表单提交事件
form.addEventListener('submit', async (e) => {
  // 关键：阻止浏览器默认跳转行为
  e.preventDefault();
  
  // 自动收集表单内所有字段数据
  const formData = new FormData(form);
  
  try {
    // 发送POST请求到网关地址
    const response = await fetch(form.action, {
      method: form.method,
      body: formData
    });
    
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    
    // 获取服务器返回的纯文本响应（包含换行）
    const responseText = await response.text();
    
    // 可选：将响应按换行分割成数组，方便处理单行数据
    const responseLines = responseText.split('\n').filter(line => line.trim() !== '');
    
    // 这里可以按需处理响应：比如打印到控制台、显示在页面上
    console.log('原始响应内容：', responseText);
    console.log('按行分割后的内容：', responseLines);
    
    // 示例：把响应显示在页面上
    const resultContainer = document.createElement('div');
    resultContainer.style.marginTop = '20px';
    resultContainer.textContent = responseText;
    document.body.appendChild(resultContainer);
  } catch (error) {
    console.error('请求出错：', error);
  }
});
</script>
</html>

如果需要兼容IE等老浏览器，可以用传统的XMLHttpRequest：

<html>
<form id="paymentForm" method='Post' action='https://www.paymentsgateway.net/cgi-bin/posttest.pl'>
  <input type='hidden' name='pg_merchant_id' value='191620'/>
  <!-- 补充你的其他表单字段 -->
  <button type="submit">提交交易</button>
</form>

<script>
const form = document.getElementById('paymentForm');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(form);
  
  const xhr = new XMLHttpRequest();
  // 初始化请求
  xhr.open(form.method, form.action);
  
  // 请求成功完成时的回调
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      const responseText = xhr.responseText;
      const responseLines = responseText.split('\n').filter(line => line.trim() !== '');
      
      console.log('原始响应内容：', responseText);
      console.log('按行分割后的内容：', responseLines);
      
      // 示例：显示到页面
      const resultContainer = document.createElement('div');
      resultContainer.style.marginTop = '20px';
      resultContainer.textContent = responseText;
      document.body.appendChild(resultContainer);
    } else {
      console.error('请求失败，状态码：', xhr.status);
    }
  };
  
  // 网络请求出错时的回调
  xhr.onerror = function() {
    console.error('网络请求发生错误');
  };
  
  // 发送表单数据
  xhr.send(formData);
});
</script>
</html>

• 必须阻止默认提交：如果漏掉e.preventDefault()，浏览器会直接跳转到响应页面，你就没机会捕获内容了，这是核心要点。
• 跨域问题处理：如果控制台出现CORS相关错误，说明支付网关服务器没有允许你的域名跨域请求。这种情况下，你需要在自己的后端搭建一个代理接口，由后端转发表单请求到支付网关，再把响应返回给前端，前端请求自己的后端接口即可。

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