Question

我正在学习如何使用jQuery方法进行AJAX调用，目前我想知道的是我如何使用$.ajax函数返回某些元素内容。我意识到这可以使用.load()轻松完成，但希望使用.ajax()获得结果。目前，当我想返回页面的#container内容时，我正在获取单击的href属性并返回整个页面数据？

正在使用的示例代码：

jQuery(document).ready(function() {
    /* Ajax load in portfolio pages */
    var ajaxLoader = $('#ajax-loader');
    var folioContainer = $('#folio-container');

    ajaxLoader.hide();

    $('div.wp-pagenavi a', 'div#content').click(function(e) {

        $.ajax({
            url : this.href,
            method : 'get',
            success : function(data){
                folioContainer.html(data);
            }
        });

        e.preventDefault();

    });

});

Answer 1

您应该能够.filter()来自服务器的响应，只选择您想要的数据：

        success : function(data){
            folioContainer.html($(data).filter('#container'));
        }

以下是此解决方案的一个方面：http://jsfiddle.net/jasper/5HSzB/

以下是代码的优化版本：

jQuery(function($) {
    /* Ajax load in portfolio pages */
    var ajaxLoader = $('#ajax-loader').hide();

    $('.wp-pagenavi', '#content').find('a').click(function(e) {       

        $.ajax({
            url     : this.href,
            method  : 'get',
            success : function(data){
                $('#folio-container').html($(data).filter('#container'));
            }
        });

        e.preventDefault();

    });

});

Answer 2

您可能最好使用加载方法http://api.jquery.com/load/，请阅读“加载页面碎片”部分

不确定但是尝试：

jQuery(document).ready(function() {
    /* Ajax load in portfolio pages */
    $('#ajax-loader').hide();

    $('div.wp-pagenavi a', 'div#content').click(function(e) {
        $.load(this.href + ' #folio-container');
        e.preventDefault();
    });
});

使用$ .ajax函数获取特定的id

2 个答案: