Question

我试图做一些jquery ajax，我想知道正确的方法来加载特定的内容。在我的情况下，它是在我的给定区域内加载整个HTML文档，当我想要的是我的div中的内容，ID为＆＃34; main＆＃34;载入。

以下是代码：

function refresh {
$('.things').load(document.URL +  ' .things');
}

这是HTML：

(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);

我希望加载external.html中的内容，而是加载整个文档，包括等等。

感谢您的帮助！

Answer 1

您可以使用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);

Answer 2

如果这是ajax请求，你应该检查后端，如果这是ajax请求，只渲染所需的部分（没有<head>等）。

或者您可以修改.done()回调：

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

我会修改后端方面，而不是将html开销用于响应

jQuery AJAX - 不加载整个文档

2 个答案: