Question

我使用$ _GET函数将内容加载到网站中，我想要做的是在所有混乱中添加一个加载图像。现在看起来它打开了一个全新的页面。

代码：

<?php
if (isset($_GET['page']) || isset($_POST['page'])) {
$page = trim(isset($_POST['page']) ? $_POST['page'] : $_GET['page']);
if (preg_match("/a-z/", $page)) {
    }
} else {
    $page = "index";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>

<div id="navigation">
<ul class="nav-items">
    <li><a href="/">Home</a></li>
    <li><a href="/index.php?page=test">Test</a></li>
    <li><a href="/index.php?page=beta">Beta</a></li>
</ul>
</div>

<div id="content">
<?
if ($page != '')
include('pages/'.$page . '.php');
else
{
include('pages/error.php');
}
?>
</div>

</body>
</html>

现在，它运行得很完美，但我希望它在加载内容时显示Loading ...图像，而不是重新加载整个页面，只需加载内容div。

我没有尝试javascript解决方案，因为我没有找到任何可以正常工作的内容并且会保持链接工作（例如http://example.com/index.php?page=test已经加载了来自pages文件夹的text.php文件）< / em>的。另外，我是一个真正的新手javascript，所以我不知道从什么开始。

Answer 1

解决此问题的唯一方法是使用JavaScript，因为PHP只会在服务器上执行，并且只会在客户端显示HTML。

如果您了解HTTP请求/响应系统，您将知道请求被发送到服务器，然后服务器响应页面内容，这将是HTML（和CSS以及任何客户端脚本，如作为JavaScript）。此方法通常意味着必须重新加载页面，但如果您使用AJAX（异步JavaScript和XML），则它充当客户端和服务器之间的层，允许用户请求内容而无需重新加载页面。

最简单的方法是使用jQuery。一定要包含jQuery库并将代码放在$(document).ready();函数中，以便在页面加载完成后执行。

幸运的是，这项特殊任务相当简单，但需要稍微重组您的网站/应用程序。您需要将内容echo ed或print编辑到PHP的不同页面。

在用户将使用和查看的主页上，您只需编写$("#container").load("page.html");，其中container是您要将内容加载到的容器的ID。

如果您希望使用不同的按钮加载不同的内容，则可以执行此操作（只要您为链接指定正确的id s：

$(document).ready(function() {
    $("#alpha").onclick(function() {
        $("#container").load('page.html?page=alpha');
    });

    $("#beta").onclick(function() {
        $("#container").load('page.html?page=beta');
    });
});

编辑：我很抱歉，我错过了关于加载图片的重要部分，但另一个答案很好地证明了这一点，所以没有必要重复它。

Answer 2

看起来它正在打开一个全新的页面，因为它是。你唯一的选择是javascript。如果我想要这样做，我总是只加载索引页面，除了加载图标外，你的内容div中没有任何内容。然后，一旦页面加载，jquery读取get变量并对页面内容发出ajax请求并将其加载到div中。

<div id="content">
    <div id='page'></div>
</div>

然后，为了让你更容易，因为你不熟悉javascript我会包含以下jquery插件：https://github.com/allmarkedup/purl

然后在.js文件中：

$( document ).ready(function() {
    var loading_annimation = "<div class='loading'></div>";
    var page = $.url().param("page");
    if(page){
        $('#page').load(loading_annimation ).load('/special_php_file_that_includes_JUST_content.php?page='+page);
    } else {
        $('#page').load(loading_annimation ).load('/special_php_file_that_includes_JUST_content.php?page=index');
    }

    $(document).on('click','.link', function(e){
        e.preventDefault();
        var page = $(this).attr("data-link");
        $('#page').load(loading_annimation ).load('/special_php_file_that_includes_JUST_content.php?page='+page);
    });
});

然后，您需要更改链接以执行以下操作：

<a class='link' data-link='beta' href="/index.php?page=beta">Beta</a>

仅加载内容

2 个答案: