javascript - 单击 <a> 标签时加载 div 内的 PHP 文件

标签 javascript php jquery html

我正在尝试根据用户点击的链接在 div 中加载 PHP 文件。我希望内容仅在该 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中显示的内容。

目前,当我单击任何链接时,没有任何反应。

谢谢!

最佳答案

仅就这件事而言,你不需要在这里,你也可以通过 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';

            }
        ?>

关于javascript - 单击 <a> 标签时加载 div 内的 PHP 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54143182/

相关文章:

php - .htaccess 不重定向到 404.php 而是显示页面名称

php - 更新数据库中的标签值(它会重复)

javascript - Javascript 中最常见的计算能力浪费是什么?

javascript - 托管站点缺少本地 html 文件中的元素

javascript - Codeigniter csrf ajax错误

javascript - Ajax 请求/响应 : how to make them lightning fast?

javascript - JQuery 错误的 ajax 完成回调被触发

javascript - 当其中 1 个输入字段为空时,将 2 个输入字段添加在一起

PHP 数据库不会保存数据

jquery - 获取每个第一个子文本并设置为每个父 ID