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

Question

I've an API that I'm connecting to. I've an index.html page with two columns in it. The left column contains thumbnails of images (see Part A) and the right column will contain details of information about the images once it is clicked on. There are currently two AJAX calls (both calling different URLs) within the same JS script file.

Part 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
    }
});

Part 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/>");
            }
        }
    }
});

Part B is still incomplete, but for the purpose of this question, it should suffice. I need to know how I can trigger Part B once the user clicks on the anchored image hyperlinks in the left sidebar. I don't want Part B to load immediately because Part B is dependent on the hero.id (from Part A) being clicked and passed to it.

Answer 1

You'll want to have a click handler for the images. You can do this in a couple ways.

Either directly

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

Or indirectly with a delegate

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

The difference being that the first puts a handler on each image and the image has to exist when you execute that line. The second is a single handler attached to the parent that reacts when one of this children has that event.

I also see in your ajax A that your wondering how to pass information to the second ajax call. One way you can do this is with data elements.

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

So you can set them on the images when you create them and reference them later.

Answer 2

An assumption on my part, lets assume that hero id is a unique value for each image. If so, in you loop,

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

                ...

Because you are assigning a click handler, you don't need the '< a>'.

Elaborating on Taplar's answer a little more, $("#comics").on('click', 'img', functionThatCallsAjaxB); after the looping is done (you only have to do it once. If you do it this one...

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

with function

 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.
 }