单击 <a> 标签时在 div 中加载 PHP 文件答案

【问题标题】：Load PHP files inside div when clicking <a> tags单击 <a> 标签时在 div 中加载 PHP 文件
【发布时间】：2019-06-06 04:17:16
【问题描述】：

我正在尝试根据用户单击的链接将 PHP 文件加载到 div 中。我希望仅在该 div 中刷新内容，而不是整个页面。

我的 index.php 文件如下所示：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" id="allrepos" href="#">GitHubAPI</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <?php
                    if(isset($_SESSION['userid']))
                    {
                        echo '
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Hello, '.$_SESSION['username'].'!</a>
                            </li>
                            <li class="nav-item active dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                My repositories
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" id="myrepos" href="#">All repositories</a>
                                    <a class="dropdown-item" id="mybookmarked" href="#">Bookmarked repositories</a>
                                </div>
                            </li>
                            <li class="nav-item active dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Profile
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">Create team</a>
                                    <a class="dropdown-item" href="#">View teams</a>
                                    <div class="dropdown-divider"></div>
                                        <a href="github/logout.php" class="dropdown-item">Logout</a>
                                    </div>
                            </li>';
                    }
                    else
                    {
                        echo 
                            '<li class="nav-item active">
                                <a class="nav-link" href="https://github.com/login/oauth/authorize?client_id=">
                                Login
                                </a>
                            </li>';
                    }
                ?>
              </ul>
            </div>
        </nav>
        
         <div id="repositories">
            <?php include 'repositories.php'; ?>
        </div>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $("#allrepos").click(function() {
                    $("#repositories").load('repositories.php');
                    return false;
                })
            });
            $(document).ready(function(){
                $("#myrepos").click(function() {
                    $("#repositories").load('myrepositories.php');
                    return false;
                })
            });
            $(document).ready(function(){
                $("#mybookmarked").click(function() {
                    $("#repositories").load('mybookmarkedrepos.php');
                    return false;
                })
            });
        </script>

当 index.php 加载时，我希望 repositories.php 被加载，然后通过单击链接来更改 id 为“repositories”的 div 中显示的内容。

目前，当我点击任何链接时，什么都没有发生。

谢谢！

【问题讨论】：

您无需重复 document.ready 来包装您声明的每个事件处理程序 - 只需将所有代码放入一个大的 document.ready 函数中
不管怎样，当你说“什么都没发生”时……你检查过浏览器控制台是否有错误？您是否在页面中正确包含了 jQuery？您是否检查了网络选项卡以查看 ajax 调用（由“加载”命令启动）是否正在发生，以及它返回了什么？您似乎没有进行任何基本调试...
不能直接加载php文件。可以直接加载js、txt、html（静态文件）。对于 php，你需要在服务器端渲染它，然后使用 ajax 来获取数据。
@HarryBomrah 是的，这正是 OP 代码中的 load() 命令的目的。这个想法是正确的，但很明显，有些东西干扰了这个过程......因此我请求调试信息
@HarryBomrah 你绝对可以直接加载php文件......（包括，需要） - php方面| (.load()) jquery 端

标签： javascript php jquery html

【解决方案1】：

仅此而已，这里不需要js，php也可以。这是如何完成的示例。希望这会对你有所帮助。

        <a href="index.php?page=about"> about </a>
        <a href="index.php?page=contact"> contact </a>
        <a href="index.php?page=service"> service </a>
        <a href="index.php?page=shope"> shop </a>

        <?php
            if(isset($_GET['page'])
            {
               if($_GET['page'] == "about")
                 include'about.php';
               else if($_GET['page'] == "contact")
                include'contact.php'; 
               else if($_GET['page'] == "service")
               include'service.php';
               else if($_GET['page'] == "shope")
               include'shope.php';

            }
        ?>

【讨论】：