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

Question

So I am having issues with trying to make my page loads appear smoother. What I want to do is use AJAX to get only a certain div from another page, and replace a div on this page with the contents of the response.

Here is my js script where I use AJAX to get some data from a different page:

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

Where placeholder is a wrapper div on both pages, and I simply want to erase the contents contained within.placeholder on this page and replace with the contents.placeholder contained within 'homepage.php'.

Answer 1

jQuery load function will be perfect for this job.

With this you can load data from a url, into a specified placeholder.

Next to the path, you can specify a selector, which will select an element on the requested page. In this case p:last-child . In your case just replace p:last-child with .placeholder

Take a look at the example below:

 $(".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>