Question

所以我使用tablesorter插件在我的仪表板中对我的投资组合进行排序/分页。在我的投资组合中的每个项目中，我都有一个youtube / vimeo计数器，可以获得投资组合项目中列出的视频的视图。不幸的是，youtube或vimeo api不是那么快，因此，视图开始之前所有项目的视图加载大约需要4秒钟，并且随着更多项目的添加，它只会变得更糟。 / p>

所以我想我可以使用数据id创建一个span，并使用jquery在页面加载完成后通过ajax添加视图。所以：

$(window).bind("load", function() {
    $('span.yt_views').each(function() {
        var id = $(this).data('id');
        console.log(id);
        $.ajax({
            type: "POST",
            url: "views.php",
            data: 'yt_views=' + id,
            success: function(response) {
                console.log(response);
                $(this).html(response);
            }
        });
    });
});

每个项目的HTML：

<span class="yt_views" data-id="<?php echo $row_projects['media_resource_id'] ?>"></span>

其中媒体资源链接是包含id的youtube页面，因此我们可以将其发送到views.php以获取相应的观看次数。

更新：图中有很多 - 似乎工作正常，但跨度的html内容没有被替换。

更新2

这样做似乎有效：

$(window).bind("load", function() {
    $('span.yt_views').each(function() {
        var rel = $(this).data('rel');
        var id = $(this).data('id');
        console.log(id);
        $.ajax({
            type: "POST",
            url: "",
            data: 'yt_views=' + rel,
            success: function(response) {
                console.log(response);
                $("span[data-id=" + id + "]").html(response);
            }
        });
    });
});

<span class="yt_views" data-id="<?php echo $row_projects['id']; ?>" data-rel="<?php echo $row_projects['media_resource_link'] ?>"></span>

仍然不确定为什么$(this).html(response);无法替换html。

Answer 1

你肯定是在正确的轨道上。以下是一些建议......

首先，在页面加载上运行jQuery的标准方法如下所示：

// your code goes inside a closure to prevent conflicts
// with other js libraries that may be in use
(function($){
    // your code inside here will run
    // when the document loads
})(jQuery);

其次，您可以使用class="replace"循环遍历元素，并将值设置如下：

(function($){
    // loop through the elements that have class="replace"
    $('.replace').each(function(i, el){
        $.post('views.php?' + el.data('id'))
         .done(function(response){
            $(el).html(response);
         });
    });
})(jQuery);

这应该适用于您所描述的内容，然而您将对表中需要更新数据的每个单元格进行单独的AJAX调用，即另一轮 - 每个表行的服务器之旅。您可以通过一次发送所有data-id值并在一个函数中处理它们来提高性能并降低服务器负载：

(function($){
    // first, grab all of the id elements
    var ids = $.map( $(".replace"), function(span) { return $(span).data("id"); });
    // then make one AJAX call to get all of the view counts
    $.post( "views.php?ids=" + ids )
     .done( function(response){
        // assuming the AJAX call returned an associative
        // array that looks something like response[data-id] = count
        $(response).each(function(id,count){
            $('.replace[data-id="' + id + '"]').html(count);
        });
     });
})(jQuery);

要使第二种方法起作用，您的PHP必须看起来像：

<?php
    header('content-type: application/json');
    $ids = $_POST['ids'];
    $counts = array();
    foreach( $ids as $id ) {
        // make the API call that gets the view count...
        $counts[id] = /* value returned by API call */;
    }

    echo json_encode($counts);

希望这会有所帮助。我没有测试过这段代码，但它应该可以运行。

页面加载后，获取每个项目的YouTube视图

1 个答案: