使用 AJAX 从 NodeJS 服务器加载 HTML 响应答案

【问题标题】：Loading HTML response from NodeJS server using AJAX使用 AJAX 从 NodeJS 服务器加载 HTML 响应
【发布时间】：2018-08-08 10:38:37
【问题描述】：

我目前正在制作一个将用户数据发布到 NodeJS 服务器的登录界面。这是表单的代码。

<form action="http://127.0.0.1:8080/" method="POST" id="login_form">
    <div class="input">
        <input class="input-box" id="username" type="text" name="username" placeholder="Username">
    </div>
    <div class="input">
        <input class="input-box" id="password" type="text" name="password" placeholder="Password">
    </div>
    <input type="submit" class="button blue" value="Login">
</form>

现在表单提交被一个 javascript 文件拦截，该文件获取表单数据并使用 AJAX 将其发布到 NodeJS 服务器。服务器验证用户登录，如果成功，则返回要使用 jQuery 加载的 HTML 页面。代码如下：

$(document).ready(function(){
    $('#login_form').submit(function(event){
        event.preventDefault();
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $('#login_form').serialize(),
            dataType: 'html',
            success: function(response) {
                $("html").html(response);
            }
         });    
    });
});

现在登录表单可以正常工作并加载 HTML 响应，但有一个小问题。在加载最终呈现的页面（包含所有 css 样式和图像）之前，页面上的所有文本都会以无格式显示，然后显示最终设计。这在登录表单页面和最终用户门户之间产生了奇怪的过渡。有谁知道为什么会发生这种情况以及解决它的任何解决方案？

【问题讨论】：

我认为没有办法避免这种情况，因为这是浏览器何时有机会更新显示的问题 - 但您可以将想要显示的所有内容放入最初不可见的元素中，然后在加载所有内容（包括 CSS 文件等）后变得可见？
通常人们通过隐藏元素来解决它，直到页面完全加载，或者通过简单地设置 display: none 或添加叠加层
@Jason，您可以预先将 CSS 应用到文档上，而不是在 AJAX 响应中使用它。

标签： javascript html node.js ajax forms

【解决方案1】：

这称为 FOUC（无样式内容的闪存）。这是避免它的现有答案：

https://stackoverflow.com/a/5983338/3044358

或者只是谷歌这个词。很多建议。

首先要尝试：将 CSS 链接标签放在 head 元素的顶部

【讨论】：