Javascript 断章取义的代码——如何正确使用AJAX来防止加载网站的这一部分？_Javascript_Php_Jquery_Css_Ajax

Javascript 断章取义的代码——如何正确使用AJAX来防止加载网站的这一部分？

javascript php jquery css ajax

Javascript 断章取义的代码——如何正确使用AJAX来防止加载网站的这一部分？,javascript,php,jquery,css,ajax,Javascript,Php,Jquery,Css,Ajax,我紧跟AJAX教程（）学习如何防止加载网站的某些部分。你可以在17:50看到他点击链接，而不是整个页面加载，只有一个特定的部分加载然而，这对我来说根本不起作用。当我单击“猫”或“狗”时，整个页面将加载。这太令人沮丧了！有人能找出我的版本中可能出现的错误吗？顺便说一下，我一直在使用XAMPP，我总是通过打开cats.php或dogs.php来测试这一点 style.css body{ background-color: aqua; } ul#nav { list-style:n

我紧跟AJAX教程（）学习如何防止加载网站的某些部分。你可以在17:50看到他点击链接，而不是整个页面加载，只有一个特定的部分加载

然而，这对我来说根本不起作用。当我单击“猫”或“狗”时，整个页面将加载。这太令人沮丧了！有人能找出我的版本中可能出现的错误吗？顺便说一下，我一直在使用XAMPP，我总是通过打开cats.php或dogs.php来测试这一点

style.css

body{
    background-color: aqua;
}

ul#nav {
    list-style:none;
    padding:0;
    margin: 0 0 10px 0;
}

ul#nav li {
    display:inline;
    margin-right:10px;
}

header.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>History API</title>
    </head>


<body>

    <nav id="main">
        <ul>
            <li><a href="cats.php">Cats</a></li>
            <li><a href="dogs.php">Dogs</a></li>
        </ul>
    </nav>

dogs.php

<?php
require 'views/header.php';
?>

<section id="content">
    <?php require 'content/dogs.php'; ?>
</section>

<?php
require 'views/footer.php';
?>

我认为您错过了最后一个正斜杠：

url: 'http://localhost/BlankApacheHistoryAPI/content' + href.split('/').pop(),

应该是

url: 'http://localhost/BlankApacheHistoryAPI/content/' + href.split('/').pop(),

在您编写的

fetchAndInsert=function（href）

的末尾}（提示：检查开发人员控制台（F12）以查看任何错误消息）


删除history.pushState（null，null，href）-它实际上是将您重定向到链接（“整个页面加载”）

你使用什么浏览器？只是一个快速猜测，尝试添加returnfalse在e.preventDefault（）之后。代码在我看来还不错，不过抓得好！这样做+删除fetchAndInsert函数末尾的额外括号修复了我的问题。很好，谢谢你。
<?php
require 'views/header.php';
?>

<section id="content">
    <?php require 'content/dogs.php'; ?>
</section>

<?php
require 'views/footer.php';
?>

Dogs say woof

url: 'http://localhost/BlankApacheHistoryAPI/content' + href.split('/').pop(),

url: 'http://localhost/BlankApacheHistoryAPI/content/' + href.split('/').pop(),