jQuery AJAX $_POST on document.ready？答案

【问题标题】：jQuery AJAX $_POST on document.ready?jQuery AJAX $_POST on document.ready？
【发布时间】：2009-12-18 00:10:32
【问题描述】：

我学习 PHP、jQuery 和 AJAX 大约有一周的时间，而且我很快就学会了。我正在建立一个带有评论系统的新视频网站，我需要一些帮助。该站点显示了一个视频缩略图列表，当用户单击缩略图时，jquery 会自动更改该页面上的 html 以显示正确的视频：

    $(".thumbnailcontainer img").click(function() {

    var yt_vid = $(this).attr("id");

    $("#youtube").fadeOut(300, function() {
        //$("#content").append('<img src="img/design/icons/loading.gif" alt="Currently Loading" id="loading" class="loading" />');
        $("#youtube").replaceWith('<object id="youtube" type="application/x-shockwave-flash" style="width:640px; height:385px; display:none;" data="http://www.youtube.com/v/' + yt_vid + '&hl=en_US&fs=1&hd=1"><param name="movie" value="http://www.youtube.com/v/' + yt_vid + '&hl=en_US&fs=1&hd=1" /><param wmode="transparent"><\/param><\/object>');
        /*$("#loading").fadeOut(500, function() {
            $(this).remove();
        });*/

        $('#youtube').fadeIn(1000);
    });

（我暂时注释掉了加载图标，因为我正在尝试弄清楚如何将其显示在 youtube 视频的顶部，而不是被推到它下面......如果你能回答这个问题，给你加分。 )

无论如何，根据显示的视频，我需要与该视频关联的 cmets 显示在下方。我希望 cmets 也能动态更改 onclick，所以我创建了以下代码：

    //Send POST data to PHP script to switch to correct comments
//Select Thumbnail's second parent's ID attr on click
    var commentsID = $(this).parents("div:eq(1)").attr("id");

    $.ajax({
        url: 'php/comments.inc.php',
        type: 'POST',
        data: 'commentsID=' + commentsID,
        success: function(html) {
                $('#comments').html(html);
                $("#db").attr("value", '' + commentsID + '');
        }
    });
});

这实质上是从缩略图的 id 属性中获取 MySQL 表名称，将其发布到返回正确 cmets 的脚本，并设置一个隐藏的表单值，该值将告诉表单将 cmets 发布到哪个表。

为了确定最近添加的视频并返回正确的 cmets，我的想法是发送一个 ajax 帖子，其中包含文档加载时的第一个缩略图的表格标识符，并附加返回的 cmets 并设置隐藏值通过 ajax。

我的问题是-上述做法是一个坏主意吗？也就是说，对我来说，发出这么多post请求来切换到正确的cmets似乎效率低下——这不是资源密集型的吗？另外，让我的数据库表名在缩略图的 id 属性中很容易看到以便我的脚本告诉我要连接到哪个数据库是否安全？

感谢您一路走来的所有帮助和任何建议。这是我在这里的第一篇文章，它似乎是一个非常有用的网站。

【问题讨论】：

Dave，当你说表名 commentsID 是字符串，而不是 ID 时？
是的，变量名有点误导。该变量实际上是设置为表名，然后发布到脚本告诉它要查看哪个表。将表名公开是否安全？

标签： php jquery mysql ajax

【解决方案1】：

由于其异步特性，在页面加载时有一个甚至几个 ajax 请求实际上可能会稍微加快加载时间。人们在加载时发出一些 ajax 请求是相当普遍的，这是一种让页面加载感觉更快的技术。

不过，您可能会考虑返回更标准化的数据类型。如果您以 json 字符串从 cmets 发回内容和元数据，您可以自己构建 cmets 并节省大量传输（所有只是重复的 html 标记）。

几个网站采用的另一个技巧是将 cmets 加载到视口区域。如果看不到 cmets（如果它们在折叠下方），则没有太多理由加载它们。然后当/如果用户向下滚动，您可以在那个时候发出请求。

就 Flash 视频的奖励积分而言，您需要查看一个名为 wmode 并将其设置为 transparent。您还可以考虑使用标准化的 swf 注入工具，例如 swfobject（或者它的 jquery 插件版本）来将这些视频添加到页面中。

【讨论】：

感谢亚历克斯的回复。我将研究 JSON，因为我不知道第一件事。此外，我的代码中实际上已经将 wmode 设置为透明，并且似乎 loading.gif 覆盖在视频的 .fadeOut 上，但在 .replaceWith 上被推下...不知道这是由什么引起的，因为原始代码和替换代码都具有透明参数。
试试.after() 而不是.append()。

【解决方案2】：

您可能希望使用loading.gif 来加载 cmets。显示 YouTube 视频的脚本将立即运行，没有任何延迟，因为它只是将 HTML 注入页面。视频的实际加载与您的页面无关。

至于loading.gif 按下视频，您需要在该图像上使用 z-index 高于 1 的 CSS position:absolute;。这将从页面流中获取上下文的图像，并允许它覆盖视频。您可以使用 top 和 left CSS 属性来居中定位图像。确保您的图像和视频是一个包含 position:relative; 的容器。

【讨论】：