單擊超鏈接后如何觸發第二個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.
 }