一页上的 Jquery 和多个 AJAX 调用

Question

我在页面上有缩略图，如下所示:

<div id="credits">
<a href="largeimage1.jpg" alt="credits1.php"><img src="thumb1"></a>
<a href="largeimage2.jpg" alt="credits2.php"><img src="thumb2"></a>
<a href="largeimage3.jpg" alt="credits3.php"><img src="thumb3"></a>
</div>

<div id="zoom"></div>

<div id="credits"></div>

我希望执行以下操作:

• 用户点击thumb1 > largeimage1加载到#zoom中并且credits1.php加载到#credits中
• 用户点击thumb2>largeimage2在#zoom中加载并且credits2.php在#credits中加载
• 等等

这可以用 jquery 实现吗？ IE。是否可以像上面那样通过一次点击在同一页面上进行两 (2) 个 ajax 调用？

我目前有以下代码可用于大型图像 ajax 调用:

<script type="text/javascript">
$(document).ready(function(){
    $("a").click(function(){
        var largePath = $(this).attr("href");
        $("#zoom img").fadeOut("slow", function() {
                $(this).attr({ src: largePath }).fadeIn("slow");
        });
        return false;
    });
});
</script>

它的工作原理就像一个魅力 - 但我现在遇到一种情况，我想加载另一个 div 中的图像的制作人员名单。

非常感谢任何帮助。 :)

Answer 1

此行上方:

return false;

添加此:

$('#credits').load($(this).attr('alt'));

异步请求的全部意义在于，您可以在继续操作时触发任意数量的请求。您可能希望有某种加载指示器来指示使用加载时发生的情况，以及一些错误处理，但上面的内容应该可以在基本级别上解决问题。