使用带有引导程序的模态中包含的另一种形式完成一种形式

Question

我需要帮助做一件小事。我在 profile.ejs 页面中呈现一个表单，其中的字段由存储在 mongo 数据库中的值填充。

现在，我没有直接编辑该主窗体中的字段并重新提交所有数据来更新数据库，而是决定在模态中制作该主窗体的一小部分，其中数据可以被编辑并单独发送到数据库（通过 express应用程序接口）。

因此，我没有直接在主窗体中编辑“权重”，而是打开一个名为 subject.ejs 的模态，其中仅包含几个要编辑的参数。

从技术上讲，subject.ejs 是嵌套在 modal.ejs 这是嵌套在 profile.ejs 中：

在我的主页 (profile.ejs) 中：

<div class="modal fade" id="subjectModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <form id="modalForm" action="<%= process.env.VIRTUAL_PATH %>/api/paramsSubject" method="post">
        <div class="modal-dialog modal-xl" role="document">
            <%- include('./profile/modal.ejs',{modalUrl:'subject.ejs'}) %>
        </div>
    </form>
</div>

<fieldset>
    <legend>4. Subject parameters</legend>
    <div disabled>
        <%- include('./profile/subject.ejs') %>
    </div>
    <div style="width: 100%;display: flex;justify-content: end;">
        <button type="button" class="btn btn-primary" id="editSubject">Edit</button>
    </div>
</fieldset>

模式的模式：（modal.ejs）：

<div class="modal-content">     
    <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <%- include(modalUrl) %>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
    </div>  
</div>

..在模式中，表单本身（subject.ejs）包含：

<div class="col-sm">
  <div class="form-group">
      <label for="weight">Weight (kg)</label>
      <input type="number" class="form-control" name="weight" id="weight" placeholder="Enter Weight" value="<%= params.weight %>">
  </div>
</div>

一切都很好，使用 jquery 我可以将模态的内容发布到 express API，我的数据存储在 mongo 数据库中，我的 profile.ejs 页面被重新加载。但是，需要重新加载 profile.ejs 页面第二次使更新的数据出现在主窗体中。

这是我发送数据的函数：

$(`#modalForm`).submit(function(e) {
  e.preventDefault();
  const form = $(this);
  const actionUrl = form.attr(`action`);

  $.ajax({
    type: `POST`,
    url: actionUrl,
    data: form.serialize(),
    success: function(data) {
      alert(`parameters updated !`);
    }
  });
});

我的快递路线：

app.post(`${virtualPath}/api/paramsSubject`, isLoggedIn, (req, res) => {
    const email = req.user.email;
    const weight = req.body.weight;

    myFunction()
    });
    // res.sendStatus(200);
    res.redirect(`${virtualPath}/profile`);
});

有什么我可以做的来替换“res.redirect”，这将使 profile.ejs 立即重新加载更新的值吗？

Answer 1

在这里，我让它工作了：

app.post(`${virtualPath}/api/paramsSubject`, isLoggedIn, (req, res) => {
    const email = req.user.email;
    const weight = req.body.weight;

    myFunction()
    })
    .then(() => {
    res.redirect(`${virtualPath}/profile`);
    });
});