使用 switch case 重新加载 div 中的内容包括

Question

我是 Ajax 和 jQuery 的新手，问题是我有一个文件夹页面，其中是带有内容 div 的 php 页面。我想用内容而不是整个页面重新加载容器 div 我尝试了很多东西，但似乎没有任何帮助。这是我的 index.php 外观的一部分：

<?php include ('inc/nav.php'); ?>

        <div id="container">
            <?
            $type = $_GET["type"];
            switch ($type) {
                case "about" :
                    include "pages/about-us.php";
                    break;
                case "contact":
                    include "pages/contact.php";
                    break;
                default :
                    include "pages/homepage.php";
            }
            ?>
          </div>

在导航中，链接如下所示：

<ul class="main-menu">
    <li class="url"><a href="index.php?type=homepage">Homepage</a></li>
    <li class="url"><a href="index.php?type=about-us">About us</a></li>
    <li class="url"><a href="index.php?type=contact">Contact</a></li>
</ul>

我试图将 pages/about-us.php 中的内容放入 <div id="container"></div>，但它不起作用。这就是我的 ajax 脚本的样子：

//run on page load
$(function(){
    //bind a click event to the nav links
    $(".url a").on("click", function(e){

        //keep the links from going to another page by preventing their default behavior
        e.preventDefault();

        //this = link; grab the url
        var pageLocation = this.href;
        console.log(pageLocation);
        //fire off an ajax request
        $.ajax({
            url: pageLocation,

            //on success, set the html to the responsetext
            success: function(data){
                $("#container").html(data.responseText);
            }
        });
    });
});

Answer 1

.load() 方法与$.get() 不同，它允许我们指定要插入的远程文档的一部分。这是通过 url 参数的特殊语法来实现的。如果字符串中包含一个或多个空格字符，则字符串中第一个空格之后的部分被假定为确定要加载的内容的 jQuery 选择器。

考虑以下示例。

$(function() {
  $(".url a").click(function(e) {
    e.preventDefault();
    var pageLocation = this.href + " #container";
    console.log(pageLocation);
    $("#container").load(pageLocation)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-menu">
  <li class="url"><a href="index.php?type=homepage">Homepage</a></li>
  <li class="url"><a href="index.php?type=about-us">About us</a></li>
  <li class="url"><a href="index.php?type=contact">Contact</a></li>
</ul>
<div id="container">
</div>

这是未经测试的。您需要在自己的代码中对此进行测试。

查看更多：https://api.jquery.com/load/