如何使用 AJAX 将 div 内容替换为另一个页面的 div 内容？

Question

所以我在尝试让我的页面加载看起来更流畅时遇到了问题。 我想要做的是使用 AJAX 从另一个页面只获取某个 div，并将此页面上的一个 div 替换为响应的内容。

这是我的 js 脚本，我使用 AJAX 从不同的页面获取一些数据：

$(function() {
    $(".home_nav").click(function() {
        $.ajax({
            type: "GET",
            url: "homepage.php",
            success: function(data) {
                $(".placeholder").html($(data).find(".placeholder").html());
            }
        });
    });
});

其中 placeholder 是两个页面上的包装 div，我只是想删除此页面上包含的内容。placeholder 并替换为包含在“homepage.php”中的 contents.placeholder。

Answer 1

jQuery load function 将非常适合这项工作。

有了这个，您可以将数据从 url 加载到指定的占位符中。

在路径旁边，您可以指定一个选择器，它将 select 元素放在请求的页面上。 在这种情况下p:last-child 。 在您的情况下，只需将p:last-child替换为.placeholder

看看下面的例子：

 $(".home_nav").click(function() { $('.placeholder').html("Loading..."); $('.placeholder').load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/Bio.html p:last-child'); }); $(".home_nav2").click(function() { $('.placeholder2').html("Loading..."); $.ajax({ type: "GET", url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/Bio.html", success: function(data) { var newHtml = $($.parseHTML(data)).filter('p:last-child')[0] $(".placeholder2").html(newHtml); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="home_nav">Learn more (.load)</button> <button class="home_nav2">Learn more (ajax)</button> <div class="placeholder"> <h2>This will be replaced by <kbd>.load()</kbd> function</h2> Pork belly ribeye jowl bacon andouille, pastrami prosciutto hamburger kevin beef ribs. Jerky pork loin frankfurter, ribeye ball tip short ribs salami chicken fatback hamburger beef bresaola picanha. Ground round meatloaf tongue shank hamburger pork loin. Swine corned beef sirloin leberkas, shank hamburger kielbasa pork belly pork loin. </div> <div class="placeholder2"> <h2>This will be replaced by <kbd>ajax()</kbd> function</h2> Pork belly ribeye jowl bacon andouille, pastrami prosciutto hamburger kevin beef ribs. Jerky pork loin frankfurter, ribeye ball tip short ribs salami chicken fatback hamburger beef bresaola picanha. Ground round meatloaf tongue shank hamburger pork loin. Swine corned beef sirloin leberkas, shank hamburger kielbasa pork belly pork loin. </div>