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

或间接与代表

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

不同之处在于，第一个在每个图像上放置处理程序，并且在执行该行时图像必须存在。第二个是附加到父级的单个处理程序，当其中一个子级具有该事件时，它会作出反应。

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

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

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

Answer 2

就我而言，我们假设英雄身份证是每张图片的唯一值。如果是这样，在你循环中，

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

                ...

因为您要分配点击处理程序，所以您不需要＆＃39;＆lt;一个＆GT;＆＃39;

详细阐述Taplar的回答，$（＆＃34; #comics＆＃34;）on（＆＃39; click＆＃39;，＆＃39; img＆＃39;，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.
 }

单击超链接时如何触发第二次AJAX调用？

2 个答案: