时间戳

首页 > 解决方案 > 如何使用 NodeJs 从服务器显示模式框？

javascript - 如何使用 NodeJs 从服务器显示模式框？

问题描述

我有一个带有联系页面的网站。当用户填写表单并按下按钮时，我将在我的 post 方法中捕获信息，如果没有任何问题，我想在该联系页面上向用户显示一个模式框。这就是我到目前为止所做的。

服务器.js

app.post("/contact", function (req, res) {
  var contactUsInfo = {
    firstName: req.body.firstname,
    lastName: req.body.lastname,
    email: req.body.email,
    regarding: req.body.regarding,
    message: req.body.message
  };

  if(sendEmail(contactUsInfo)){
    res.render("modal_success", { testing: "Hello" });
  }
});

联系人.html

....
....

<input name = "submit_btn" type="submit" value="Submit" formaction="/contact" formmethod="POST"/>

模态框

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
               <% testing %>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

模态框确实出现了，但没有任何样式，背景是白色的，没有格式。我刚开始 Web 开发和一个非常大的新手。如果您能告诉我这是否是正确的方法，那就太好了。

标签： javascriptnode.jsexpress

解决方案

您可以简单地将响应发送回前端。您是否使用 axios、fetch 或其他方式向后端发送请求？

您可以使用和内部捕获响应，.then()您可以触发模式的打开。我假设您正在使用 Bootstrap modal，因此您可以使用它$('#myModal').modal('show')，或者您可以参考此链接bootstrap modal methods

推荐阅读