为何表单提交会重定向至API地址而非仅处理数据？

问题根源 #

你当前的表单用的是浏览器原生提交逻辑，点击订阅按钮时，浏览器会直接跳转到action指定的API地址，这就是页面出现空白的原因。要改用axios发送请求，必须先阻止这个默认跳转行为。

具体解决步骤 #

1. 给表单绑定提交事件处理函数，用代码阻止浏览器默认的表单提交行为
2. 在事件处理函数里，用axios手动向目标API发送POST请求
3. 可以移除form标签里的action和method属性（留着也不影响，但没必要保留）

修改后的代码示例 #

表单部分：

<section className="section-base align-center section-color">
  <div className="container">
    <h2>Feliratkozom most</h2>
    <div className="width-650">
      <p>Kíváncsi vagyok mi történik felétek</p>
      <hr className="space-sm" />
      <form
        className="form-box form-ajax form-inline align-center"
        onSubmit={handleSubscribe}
      >
        <div className="row">
          <div className="col-lg-4"></div>
          {/* 用户输入邮箱的输入框 */}
          <input type="email" name="email" placeholder="你的邮箱地址" required />
          <button type="submit">订阅</button>
        </div>
      </form>
    </div>
  </div>
</section>

提交事件处理函数（以React为例）：

import axios from 'axios';

const handleSubscribe = (e) => {
  // 核心：阻止浏览器默认跳转行为
  e.preventDefault();
  
  // 获取用户输入的邮箱
  const email = e.target.elements.email.value;
  
  // 用axios发送POST请求
  axios.post('https://api.skymongoose.com/subscription', { email })
    .then(res => {
      console.log('订阅成功', res);
      // 这里可以添加订阅成功的提示，比如弹窗或文字提示
    })
    .catch(err => {
      console.error('订阅失败', err);
      // 这里添加错误提示逻辑
    });
};

额外注意 #

• 如果项目还没安装axios，先执行npm install axios完成安装
• 不要用硬编码的data-email属性，要从用户输入的输入框里获取实际邮箱地址

内容的提问来源于stack exchange，提问作者János