javascript - 如何在单击超链接时触发第二个 AJAX 调用？

Question

我有一个正在连接的 API。我有一个 index.html 页面，其中有两列。左栏包含图像的缩略图(请参阅 A 部分)，右栏将包含单击后有关图像的详细信息。当前同一个 JS 脚本文件中有两个 AJAX 调用(都调用不同的 URL)。

A部分

$.ajax({
    url: 'http://gateway.marvel.com:80/v1/public/characters?limit=5&offset=300&apikey=' + publickey + "&ts=" + ts + "&hash=" + hash,
    method: 'get',
    success: function (res) {
        var characters = res.data.results;
        var index = 0;

        loadCharacters();

        function loadCharacters() {
            if (index > characters.length) {
                index = 0;
                return;
            }

            for (index = 0; index < characters.length; index++) {
                var hero = characters[index];
                var heroID = hero.id;
                var heroName = hero.name;
                var image = hero.thumbnail;
                var image_url = image.path + '.' + image.extension;

                var image_target = $("#comics")

                $('<img>').attr({
                    src: image_url,
                    width: 80,
                    height: 80,
                }).appendTo($('<a>').attr({
                    href: '#?' + heroID,
                    //}).click(dummyCall(hero.id)).appendTo(image_target)); //NOTE: to figure how to pass this hero.id to second ajax call..
                }).appendTo(image_target)); 

                image_target.append("<br/>" + heroName + "<br/>");
            }
        } // end first ajax
    }
});

B 部分

$.ajax({
    url: "https://gateway.marvel.com:443/v1/public/characters/1009269/comics?limit=5&apikey=" + publickey + "&hash=" + hash + "&ts=" + ts,
    method: 'get',
    success: function (res) {
        var comicDetails = res.data.results;
        var index = 0;

        loadComic();

        function loadComic() {
            if (index > comicDetails.length) {
                index = 0;
                return;
            }
            for (index = 0; index < comicDetails.length; index++) {
                var comic = comicDetails[index];
                var comicTitle = comic.title;
                $("#comics").append("<br/>" + comicTitle + "<br/>");
            }
        }
    }
});

B 部分仍然不完整，但对于这个问题的目的来说，它应该足够了。我需要知道一旦用户单击左侧边栏中的锚定图像超链接，如何触发 B 部分。我不希望立即加载 B 部分，因为 B 部分依赖于单击并传递给它的 hero.id(来自 A 部分)。

Answer 1

您需要一个图像的点击处理程序。您可以通过多种方式做到这一点。

直接

$imageElements.on('click', functionThatCallsAjaxB);

或间接与委托(delegate)人

$("#comics").on('click', 'img', functionThatCallsAjaxB);

区别在于，第一个在每个图像上放置一个处理程序，并且当您执行该行时该图像必须存在。第二个是附加到父级的单个处理程序，当其中一个子级发生该事件时，该处理程序会使用react。

我还在您的 ajax A 中看到您想知道如何将信息传递给第二个 ajax 调用。实现此目的的一种方法是使用数据元素。

$element.data('heroId', 'myvalue'); <-- setter
$element.data('heroId') <-- getter

因此，您可以在创建图像时将它们设置在图像上，并在以后引用它们。