我正在创建一个网站并使用html来构建页面布局。所以我有一个大的 html 文档index.html.有页眉、中间部分和页脚。许多脚本用于表单检查，动画，滑块等。滑块具有多个背景图像和每张幻灯片的不同内容。所以index.html里面有很多东西，当用户第一次加载它时，使用了相当多的流量。
当用户填写登录表单时，客户端jquery脚本检查表单，然后将数据发布到php脚本，在那里执行服务器端检查并启动会话。服务器成功响应后，我希望index.html使用不同的标头重新加载。为此，我想出了两个解决方案：
*
- 我可以使用 AJAX 将不同的文档加载到标头容器中。
- 我可以重定向到另一个具有完全相同代码的 html 文档(例如
index2.html文档，但标题容器部分已更改。
我不喜欢这两种解决方案。通过使用 AJAX，我可以避免强制用户重新加载所有流量。但这对我来说似乎并不优雅，因为仅重新加载标题会使白色方块出现在该部分中，这会破坏用户的设计体验并且看起来很笨重。但是，当它是异步操作时，有什么方法可以在文档加载时在标题区域中向用户显示某些内容？
第二种解决方案显然很糟糕，因为这会导致大量的代码重复流量重新加载等。
如果我使用 PHP 来构建我的项目，我可以将文档分解为模块(页眉.php、中段.php、页脚等.php等(所以我的index.php文件将包含includes，我可以创建onloginheader.php文件并在页面重新加载时include更改为它。
有没有办法在 html 文档中做类似的事情？
我不能很好地理解，但是，这可能会对您有所帮助。
$('#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();
}
});
表示一个div 容器，可能不透明度：0.8，并且其中有一个加载指示器。它将显示在您的标题部分，默认 css 值为 display：none;
当您发送登录请求时，首先您应该向用户显示加载屏幕，以便他无法理解标题部分的更改。之后，如果登录成功，您可以进行来自服务器端的更改，或者您可以通过jQuery设置用户名。其余的，您将再次隐藏加载屏幕。仅此而已。