单击超链接后如何触发第二个AJAX调用？

Question

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

甲部

$.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);

或间接与代表

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

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

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

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

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

Answer 2

就我而言，假设每个图片的英雄ID都是唯一的值。 如果是这样，在您循环中，

          $('<img>').attr({
                src: image_url,
                width: 80,
                height: 80,
                id: hero.id,

                ...

因为您要分配点击处理程序，所以不需要'<a>'。

详细说明Taplar的答案，$（“＃comics”）。on（'click'，'img'，functionThatCallsAjaxB）; 循环完成后（您只需要执行一次即可。如果执行此操作...

$("#comics").on('click', 'img', function(evtObj){ functionThatCallsAjaxB(evtObj);});

具有功能

 functionThatCallsAjaxB(obj) {
     // the image that was clicked will be obj.target.
     // with the above assumption, 
     var heroID = obj.target.id;

     // the rest of your part b ajax goes here.
 }