jQuery的AJAX - 不加載整個文件

我想要做一些jQuery的ajax，我想知道正確的方式來獲取特定的內容加載。在我的情況下，它是加載我的指定區域內的整個HTML文檔，當我想要的是我的div中的內容與ID爲「主要」加載。jQuery的AJAX - 不加載整個文件

下面是代碼：

(function($){ 
// target the links 
$link = $('nav a'); 
// on click 
$link.on('click', function(event){ 

    // create variables 
    $el = $(this); 

    var value = $el.attr("href"); 
    event.preventDefault(); 

    $.ajax({ 
     url: value, 
     method: 'POST', 
     data: { href: value }  
    }) 
    .done(function(html) { 
    $("#main").append(html); 
    }); 
}); 

})(jQuery);

這裏是HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>AJAX jQuery</title> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- Mobile Specific Meta --> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> 


    <!-- Stylesheets --> 


    </head> 
    <body> 

     <nav> 
      <a href="/ajax-test">Main</a> 
      <a href="external.html">Some link</a> 
     </nav> 

     <div id="main"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> 
    <script src="ajax.js" charset="utf-8"> 

    </script> 
    </body> 
</html>

我想在external.html內容的負載，而是它加載整個文檔，包括等。

感謝您的幫助！

來源

2016-07-22 Ryan Mc

你可以用這樣的回答：http://stackoverflow.com/questions/405409 /使用-jquery-selectors-on-ajax-loaded-html –

可以使用load方法，這樣做：

(function($){ 
    // on 'Nav' click 'a' delegation 
    $('nav').on('click', 'a', onNavLinkClick) 

    // nav links click callback 
    function onNavLinkClick(e){ 
     $("#main").load($(this).attr("href")); // will put the ajax response inside #main 
     return false; 
    }); 
})(jQuery);

同上使用$.ajax方法：

(function($){ 
    // on 'Nav' click 'a' delegation 
    $('nav').on('click', 'a', onNavLinkClick) 

    // nav links click callback 
    function onNavLinkClick(e){ 
     getPage($(this).attr("href")).done(function(HTML){ 
      $("#main").html(HTML); // replace the content of "#main" with the server response 
     }) 
     return false; 
    }); 

    // returns an AJAX promise 
    function getPage(URL){ 
     return $.ajax({ 
      url  : URL, 
      method : 'GET', 
      dataType : 'html' 
     }) 
    } 
})(jQuery);

來源

2016-07-22 08:39:45 vsync

謝謝。我知道加載方法，但我想使用更全面的$ .ajax（{}）對象。 –

@RyanMc - 爲什麼？爲什麼不使用適合您需要的手套？ – vsync

除了更好地理解ajax，我沒有真正的需要。我已經知道如何使用加載方法。 –

您應該檢查在後臺，如果這是AJAX請求，如果這是ajax請求只渲染需要的部分（沒有<head>等）。

，也可以修改你的.done()回調：

.done(function(html) { 
    $("#main").append($(html).find('#main').html()); 
});

我將修改後端側，不要把HTML開銷響應

來源

2016-07-22 08:41:42

jQuery的AJAX - 不加載整個文件

回答

相關問題