如何在 Node.js 中渲染页面之前添加加载屏幕？答案

【问题标题】：How to add loading screen before rendering a page in Node.js?如何在 Node.js 中渲染页面之前添加加载屏幕？
【发布时间】：2019-04-17 13:03:35
【问题描述】：

在主页上，我有一个表格。 POST 操作在填写后执行。在POST 事件处理程序中，我使用表单中的给定数据创建了一个执行python 文件的子进程。子进程返回一个承诺，返回后，我呈现所需的页面。在页面呈现之前，浏览器会在 URL 字段旁边显示加载动画（重新加载按钮一直在旋转）。我已经设计了自己的加载动画，并且在呈现页面之前，我希望该动画在页面上运行。在脚本的什么地方，我应该添加函数来做吗？

index.post("/", function (request, response) {

    let my_url = "" + request.body.my_url + "";

    let py_program = spawn(pyInterpreter, ["run_algorithms/summarize_with_url.py", my_url]);

    py_program.stdout.on("data", data  => {

        console.log("Summary generated!");
        response.render("home.ejs", {summary: data.toString()});

    });
});

编辑（不太清楚）： python 脚本运行大约需要 15 秒。因此，页面在完成之前不会被渲染。因此，客户端 js 文件不会加载，因为它们包含在要渲染的页面中。我想在服务器响应之前显示动画。

【问题讨论】：

相关且值得一读：stackoverflow.com/questions/1404376/…
@Pongrindis 我认为我的问题不清楚。问题是 python 脚本需要大约 15 秒才能运行。因此，页面在完成之前不会被渲染。因此，客户端 js 文件不会加载，因为它们包含在要渲染的页面中。我想在服务器响应之前显示动画。

标签： javascript node.js server ejs

【解决方案1】：

不是节点的问题，而是浏览器的问题。您必须将旋转事件附加到 POST 事件的承诺或响应等待。

最简单的解决方案是：通过 Ajax 发送 POST，显示微调器并等待响应。如果响应有效，则 EJS 将删除您的表单并显示新页面。如果响应无效，您将隐藏您的微调器。

使用这样的东西：

$('#form').submit(function(e){
    e.preventDefault()
    $.ajax({method:'POST',
        data:this.serialize(),
        success: function(data){
            if(!data){
                $('#spinner').hide();
                alert ('Your form is invalid!')
            }}})
})

【讨论】：