javascript - 使用 Ajax 更新除一个 div 之外的页面内容

Question

我正在尝试创建一个使用 AJAX 加载所有页面的网站。这是一个简单的JS这样做是这样的:

$.ajax({
  url: url,
  type: 'GET',
  success: function(html) {
    document.open();
    document.write(html);
    document.close();
  }
});

这显然有效并更新了我当前的页面内容。

问题是我想保留一个div不变(我们称之为 .player-wrapper )。这个div实际上是一个<audio>我想继续玩的包装器(这就是我 AJAX 化整个网站的原因)。这可能吗？

Answer 1

每次渲染页面时，您都可以像这样初始化插件/库:

const App = function() {
    return {
        init: function() {
            // Do all your JS stuff here
            
            console.log('App initialized.');
        },
        render: function(url) {
            $.get(url, data => {
                $('main').html(data);
            }, 'html').done(() => {
                this.init();
            });
        }
    };
}();

$(function() {
    App.init();
    
    $(document).on('click', '[data-page="ajax"]', function (e) {
        e.preventDefault();
        
        const url = $(this).attr('href');
        
        App.render(url);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<audio class="player-wrapper" src="https://www.free-stock-music.com/music/alexander-nakarada-wintersong.mp3" controls autoplay></audio>

<main>
    <h1>Initial page.</h1>
</main>

<nav>
    <a href="https://reqres.in/api/unknown/2" data-page="ajax">Go to dummy page</a>
</nav>