我有一个视频作为背景,现在想加载页面内容,其他一切保持不变。我试着使用Ajax,但是没用。有办法做到这一点吗?Layout代码:
/...
<body>
<video autoplay loop poster="/img/bg-still.png" preload="auto" id="bg">
<source src="/img/bg.webm" type="video/webm">
</video>
<div id="wrapper">
<header>
<div class="top_line">
<div class="container">
<div class="row">
<?php
if ($user = $this->identity()) {
?>
<div class="col-lg-6 pull-left">
<p>
<span class="welcome-show">Здравей, <?php echo $this->EscapeHtml($user->nick) ?></span>
<span class="rank">Ранк:
<?php
switch ($user->role) {
case 1:
?> <span class="rank-vip">VIP</span> <?php
break;
case 2:
?> <span class="rank-vipplus">VIP+</span> <?php
break;
default:
?> <span class="rank-none">Никакъв</span> <?php
break;
}
?>
</span>
<span class="credits-show">Кредити: <?php echo $this->EscapeHtml($user->credits) ?></span>
<a href="/charge-credits" class="credits-charge-link"><img src="/img/ui-icon-credits" class="ui-icon-credits"/>Заредете кредити</a>
<a href="/edit" class="register"><span
class="icon icon-settings ui-icon ui-icon-gear"></span>Настройки</a>
<a href="/logout" class="register"><span
class="icon icon-logout ui-icon ui-icon-close"></span>Излез</a>
</p>
</div>
<?php
} else {
?>
<div class="col-lg-6 pull-left">
<p>
<a href="/login" class="login"><span class="icon icon-login ui-icon ui-icon-key"></span>Влез</a>
<a href="/register" class="register"><span
class="icon icon-register ui-icon ui-icon-person"></span>Регистрирай се</a>
</p>
</div>
<?php
}
?>
</div>
</div>
</div>
</header>
<div class="page_head">
<div class="nav-container" style="height: auto;">
<nav>
<div class="container">
<div class="row">
<div class="col-lg-3 pull-left">
<a href="/">
<div class="logo"></div>
</a>
<div class="beta">BETA</div>
</div>
<div class="col-lg-9 pull-right">
<div class="menu">
<div id="dl-menu" class="dl-menuwrapper">
<button class="dl-trigger">Open Menu</button>
<?php
echo $this->navigation('navigation')->menu();
?>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="content" id="content">
<?php echo $this->content; ?>
</div>
<div class="footer">
/...
你可以使用Ajax的load方法来动态加载页面内容。例如:
$(document).ready(function(){
$("#div1").load("/path/to/page.html");
});
这会在页面初始化时将/path/to/page.html的内容加载到id为div1的div中。你也可以在用户点击按钮或其他交互时触发内容加载。
你还可以使用Ajax的get或post方法来发送请求,并在服务器端执行查询或更新数据库操作。例如:
$.ajax({
type: "POST",
url: "/path/to/server/script.php",
data: { id: id },
success: function(data) {
$("#div1").html(data);
}
});
这会向/path/to/server/script.php发送一个POST请求,并将id参数传递给服务器端脚本。当服务器响应请求后,将响应的数据更新到id为div1的div中。
希望这些信息能帮助你实现动态加载页面内容。