个人中心
gpt4 book ai didi

javascript - AJAX 不再在页面上显示任何修改

转载 作者：行者123 更新时间：2023-12-02 15:08:54 25 4
gpt4 key购买 nike


我刚刚遇到了一个问题，但我不知道它来自哪里...事实是，昨天晚上，我开始编写一个网站，一切正常。

今天早上，我来到办公 table 前，打开我的网站，它成功了。但它并没有像我预期的那样工作:无论我对页面进行哪些更改，它似乎都不会显示或保存...

所以我想知道...我的 jQuery AJAX 请求是否错误，或者我不知道它可能是什么。
请注意，我已经检查过很多次，是否将文件保存在正确的位置，是否有某些 JavaScript 在加载时失败，以及是否没有关闭 HTML 标签，现在我陷入了困境。

我正在使用 Bootstrap 3 样式表、jQuery 和 jQuery-ui JavaScript 以及 jQuery AJAX。

这是我的代码:

index.html:

<!DOCTYPE html>
<html>
<head>

    <title>Sample title</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"></link>
    <link href="css/bootstrap-theme.min.css" rel="stylesheet"></link>
    <script src="js/jquery.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<body>

    <div class="container-fluid">

        <div id="navbar"></div>

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

        <div id="footer"></div>

    </div>

    <script>

        $(document).ready(function(){
            $.ajax({
                url: "views/navbar.html",
                success: function(result){
                    $('#navbar').html(result);
            }});
            $.ajax({
                url: "views/cv.html",
                success: function(result){
                    $('#content').html(result);
            }});
            $.ajax({
                url: "views/footer.html",
                success: function(result){
                    $('#footer').html(result);
            }});
        });

    </script>

</body>
</html>

navbar.html 是默认的 Bootstrap 导航栏，但它位于其中:

<script>    
$('#webdev').click(function(){
    function webdev_ajax()
    {
        $.ajax({
            url: 'views/webdev.html',
            success: function(result){
                $('#content').html(result);
        }});
    }
    $('li').removeClass('active');
    $('#li_webdev').addClass('active');
    $('#content').fadeOut().delay(600);
    setTimeout(webdev_ajax,600);
    $('#content').fadeIn();
});

$('#cv').click(function(){
    function cv_ajax()
    {
        $.ajax({
            url: 'views/cv.html',
            success: function(result){
                $('#content').html(result);
        }});
    }
    $('li').removeClass('active');
    $('#li_cv').addClass('active');
    $('#content').fadeOut().delay(600);
    setTimeout(cv_ajax,600);
    $('#content').fadeIn();
});
</script>

cv.html 没有真正的内容，只有一个带有一些文本的“p”标记，并且在更改时继续显示，但 webdev.html 不显示更改。

这是 webdev.html 的代码:

<div class="row">
<div class="col-md-4">

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 style="text-align:center;">HTML</h3>
        </div>
        <div class="panel-body">
            <p>
                Le HTML (Hyper Text Markup Language) est la base de tout projet internet : c'est le langage web permettant de mettre en forme
                du contenu web pour un site. Il est généralement couplé à d'autres langages afin d'en étendre les possibilités (CSS, PHP, JavaScript, etc...)
            </p>
        </div>
        <table class="table">
            <tr>
                <td class="active"><b><center>Niveau</center></b></td>
                <td class="info"><center>Débutant - Utilisateur indépendant</center></td>
            </tr>
            <tr>
                <td><b><center>Connaissances prérequises</center></b></td>
                <td class="info"><center>Aucune</center></td>
            </tr>
            <tr>
                <td class="active"><b><center>Logiciels / fichiers requis</center></b></td>
                <td class="success"><center>Editeur de code<sup><a id="code_edit" href="#">?</a></sup></center></td>
            </tr>
        </table>
        <div class="panel-footer">
            <p style="text-align:center;"><a href="#" class="btn btn-primary btn-block">Choisir</a></p>
        </div>
    </div>

</div>
<div class="col-md-4">

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 style="text-align:center;">JavaScript</h3>
        </div>
        <div class="panel-body">
            <p>
                Le JavaScript est un langage de script utilisé dans les pages web en général pour rendre celles-ci
                plus dynamiques. Ces scripts s'exécutent côté client (machine de l'utilisateur) et respectent la norme
                ECMA Script. Il existe des fonctionnalités supplémentaires permettant d'étendre le JavaScript vers le serveur.
            </p>
        </div>
        <div class="panel-footer">
            <p style="text-align:center;"><a href="#" class="btn btn-primary btn-block">Choisir</a></p>
        </div>
    </div>

</div>
<div class="col-md-4">

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 style="text-align:center;">jQuery</h3>
        </div>
        <div class="panel-body">

        </div>
        <div class="panel-footer">
            <p style="text-align:center;"><a href="#" class="btn btn-primary btn-block">Choisir</a></p>
        </div>
    </div>

</div>
</div>

<script>
$(document).ready(function(){
    var texte = "Un éditeur de code est un logiciel où vous pouvez éditer du texte.\nExemple : Notepad++, Netbeans, Sublime Text, etc...";
    $('#code_edit').prop('title',texte);
    $('#code_edit').tooltip();
});
</script>

如果有人知道它的来源和原因，请告诉我。

最佳答案

看来您的浏览器已缓存了 html 网页。正如您在 jquery 文档中看到的:

cache (default: true, false for dataType 'script' and 'jsonp') Type: Boolean If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.

因此您可以将参数添加到ajax选项中

cache: false

您也可以将参数添加到ajax请求文件名

webdev.html?v=1...

它将强制浏览器加载它

您可以在此处阅读有关 ajax 缓存的更多信息: https://blog.httpwatch.com/2009/08/07/ajax-caching-two-important-facts/

关于javascript - AJAX 不再在页面上显示任何修改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34919123/

25 4 0
文章推荐： javascript - 如何使用 Angular 刷新页面以从服务中获取新值？
文章推荐： javascript - Angular 2 : importing router bundle
文章推荐： javascript - insideHTML 无法在事件处理函数内工作(Javascript)
文章推荐： javascript - jQuery onClick 通过 GET 将变量传递给 URL 并加载该 URL
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com