表单提交后如何将用户正确重定向回user-profile-edit页面？

核心问题在于你当前是直接渲染原页面模板，而非触发浏览器跳转，导致URL停留在表单提交的控制器路由上，而原页面的城市信息获取逻辑仅绑定在user-profile-edit路由下。以下是三种可行的解决办法：

1. 用重定向替代直接渲染 #

处理完表单逻辑后，不要直接调用render('user-profile-edit')，而是通过重定向让浏览器跳转到user-profile-edit的路由地址。这样URL会恢复为原页面地址，同时路由逻辑会正常执行并获取城市信息。如果需要传递操作结果（成功/错误提示），可以用会话Flash存储临时信息。

代码示例（以Express框架为例）： #

// authController 处理表单提交逻辑
exports.updateProfileSection = async (req, res) => {
  try {
    // 执行数据库更新操作
    await User.findByIdAndUpdate(req.user.id, req.body);
    // 存储操作成功提示
    req.flash('success', '信息更新完成');
    // 重定向回原页面路由
    return res.redirect('/user-profile-edit');
  } catch (err) {
    req.flash('error', `更新失败：${err.message}`);
    return res.redirect('/user-profile-edit');
  }
};

2. 统一表单提交入口 #

将所有表单的action指向同一个控制器路由，通过提交按钮的name或value区分不同的处理逻辑，处理完成后统一重定向回原页面。这种方式可以减少冗余路由，也能保证URL始终正确。

前端表单示例： #

<!-- 表单1 -->
<form action="/auth/update-profile" method="POST">
  <!-- 表单字段 -->
  <input type="text" name="nickname" />
  <button type="submit" name="action" value="updateNickname">更新昵称</button>
</form>

<!-- 表单2 -->
<form action="/auth/update-profile" method="POST">
  <!-- 表单字段 -->
  <input type="text" name="phone" />
  <button type="submit" name="action" value="updatePhone">更新手机号</button>
</form>

控制器逻辑示例： #

exports.updateProfile = async (req, res) => {
  const { action } = req.body;
  try {
    switch(action) {
      case 'updateNickname':
        await User.findByIdAndUpdate(req.user.id, { nickname: req.body.nickname });
        break;
      case 'updatePhone':
        await User.findByIdAndUpdate(req.user.id, { phone: req.body.phone });
        break;
      default:
        throw new Error('无效的操作类型');
    }
    req.flash('success', '操作成功');
    res.redirect('/user-profile-edit');
  } catch (err) {
    req.flash('error', err.message);
    res.redirect('/user-profile-edit');
  }
};

3. 异步提交表单（无刷新） #

用AJAX/Fetch异步提交表单，页面不刷新，URL完全保持不变。处理完后仅更新页面局部内容（如提示信息、需要刷新的城市数据），体验更流畅。

前端JS示例： #

// 给所有表单绑定异步提交事件
document.querySelectorAll('.profile-form').forEach(form => {
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    try {
      const res = await fetch(form.action, {
        method: 'POST',
        body: formData,
        credentials: 'include' // 携带会话信息
      });
      const result = await res.json();
      // 更新页面提示
      document.querySelector('.alert-box').textContent = result.message;
      // 如果城市信息需要刷新，重新请求数据渲染
      if (result.success) await reloadCityInfo();
    } catch (err) {
      document.querySelector('.alert-box').textContent = '网络请求失败';
    }
  });
});

控制器返回JSON示例： #

exports.updateProfileSection = async (req, res) => {
  try {
    await User.findByIdAndUpdate(req.user.id, req.body);
    res.json({ success: true, message: '更新成功' });
  } catch (err) {
    res.json({ success: false, message: `更新失败：${err.message}` });
  }
};

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