Question

我正在创建一个网站并使用html来构建页面布局。所以我有一个大的html文档index.html。有标题，中间部分和页脚。许多脚本用于表单检查，动画，滑块等。滑块具有多个背景图像和每个幻灯片的不同内容。因此index.html中有很多内容，当用户第一次加载它时，会使用相当多的流量。
当用户填写登录表单时，客户端jquery脚本检查表单，然后将数据发布到php脚本，执行服务器端检查并启动会话。从服务器成功响应后，我希望index.html使用不同的标头重新加载。我想出了两个解决方案：
*

我可以使用AJAX将不同的文档加载到标题容器中。
我可以重定向到另一个html文档（例如index2.html具有完全相同的代码，但标题容器部分已更改。

我不喜欢这两种解决方案。通过使用AJAX，我可以避免强制用户重新加载所有流量。但对我来说似乎并不优雅，因为仅重新加载标题会使白色方块出现在该部分中，这将破坏用户的设计体验并且看起来很笨重。但是，虽然它的异步操作有任何方法可以在文档加载时在标题区域显示用户的内容吗？第二种解决方案显然是不好的，因为这将导致大量的代码重复流量重新加载等等。

如果我使用PHP来构建我的项目，我可以将文档分成模块（header.php，midSection.php，footer.php等）。所以我的index.php文件会由includes组成，我可以创建onloginheader.php文件，并在页面重新加载时将include更改为。
有什么方法可以在html文档中执行类似的操作吗？

Answer 1

我无法理解，但这可能会对你有所帮助。

    $('#header > #loading').show();

    $.ajax({
        type: "POST",
        data: "email=email@example.com&password=password"
        url: url,
        dataType: 'json'
    }).done(function(data) {
        if(data) {
            if(data.status == 'success')
                $('#header > #memberArea').html(data.memberAreaCode);
            else
                $('#header > #loginError').show();

            $('#header > #loading').hide();
        }
    });

Loading代表一个div容器，可能是不透明度：0.8并且其中有一个加载指示符。它将显示在标题部分，默认的css值为display：none;

当您发送登录请求时，首先应向用户显示加载屏幕，以便他无法理解标题部分的更改。之后，如果登录成功，您可以进行来自服务器端的更改，或者您可以通过jQuery设置用户名。其余的，你将再次隐藏加载屏幕。这就是全部。

如何分解HTML文档实现模块化？

1 个答案: