Bootstrap模态框表单更新后EJS页面需二次刷新问题求助

方案1：后端返回更新后的数据，前端直接更新DOM #

把后端路由里的res.redirect改成返回更新后的JSON数据，前端拿到数据后直接修改页面上对应的元素，不用刷新整个页面：

• 后端Express路由示例：

  app.post('/update-subject', async (req, res) => {
    try {
      // 第三个参数{ new: true }确保返回更新后的文档
      const updatedUser = await User.findByIdAndUpdate(
        req.user.id,
        { $set: req.body },
        { new: true }
      );
      res.json(updatedUser); // 把更新后的数据传给前端
    } catch (err) {
      res.status(500).json({ error: err.message });
    }
  });
  

• 前端jQuery Ajax处理：

  $('#modal-form').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    $.ajax({
      url: '/update-subject',
      method: 'POST',
      data: $(this).serialize(),
      success: function(updatedData) {
        // 直接更新页面上对应的字段，比如学科名称
        $('#profile-subject').text(updatedData.subject);
        // 关闭模态框
        $('#subject-modal').modal('hide');
      },
      error: function(err) {
        console.error('更新失败:', err);
      }
    });
  });
  

方案2：后端返回成功状态，前端主动拉取最新数据 #

如果不想后端返回完整的用户数据，也可以让后端只返回更新成功的标识，前端再发一次请求获取最新的用户信息，然后更新DOM：

• 后端路由示例：

  app.post('/update-subject', async (req, res) => {
    try {
      await User.findByIdAndUpdate(req.user.id, { $set: req.body }, { new: true });
      res.json({ success: true }); // 返回成功状态
    } catch (err) {
      res.status(500).json({ success: false, error: err.message });
    }
  });
  

• 前端处理示例：

  $('#modal-form').submit(function(e) {
    e.preventDefault();
    $.ajax({
      url: '/update-subject',
      method: 'POST',
      data: $(this).serialize(),
      success: function() {
        // 发起请求获取最新用户数据
        $.get('/api/user/profile', function(latestData) {
          // 更新页面上的多个字段
          $('#profile-subject').text(latestData.subject);
          $('#profile-grade').text(latestData.grade);
          $('#subject-modal').modal('hide');
        });
      },
      error: function(err) {
        console.error('更新失败:', err);
      }
    });
  });
  

方案3：局部刷新页面组件（基于模板片段） #

如果你的profile.ejs里用户信息是用单独的模板片段渲染的，可以在更新后，通过Ajax重新加载这个片段并替换页面上的对应区域：

• 后端新增一个渲染模板片段的路由：

  app.get('/profile/user-info', async (req, res) => {
    const user = await User.findById(req.user.id);
    res.render('partials/user-info', { user }); // 渲染用户信息的片段模板
  });
  

• 前端处理示例：

  $('#modal-form').submit(function(e) {
    e.preventDefault();
    $.ajax({
      url: '/update-subject',
      method: 'POST',
      data: $(this).serialize(),
      success: function() {
        // 重新加载用户信息片段并替换页面上的容器
        $('#user-info-container').load('/profile/user-info', function() {
          $('#subject-modal').modal('hide');
        });
      },
      error: function(err) {
        console.error('更新失败:', err);
      }
    });
  });
  

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