Question

这里，一旦我们在文本框中输入标签，就会显示图像，标题和标签，应该没问题。一旦我们输入任何超链接，就应该显示该标签相关的图像，标题和标签。可以任何一次帮助我如何在另一个ajax调用中调用ajax。这是我的代码。

$('#idSubmit').click(function(){  
  $('#image-container').html("");  
   var txtVal = $('#idText').val(); 
    $.ajax({
            type:'GET',
            url:"http://api.flickr.com/services/feeds/photos_public.gne?tags="+txtVal,
            data:"&lang=en-us&format=json&jsoncallback=?",
            success:function(data) {
                $.each(data.items, function(i, item) {      
                    if (item.media.m){
                        var container = $("<div/>");                        
                        var tagImgs = $("<img/>").attr("src", item.media.m).appendTo(container);
                        var imgTitle = $("<p/>").html('<b>Title</b> : ' + item.title).appendTo(container)
                        var imgTags = $("<p/>").html('<b>Tags</b> : ' + item.tags).appendTo(container);                                                                             
                        var imgTags1 = item.tags;
                        var imgTags1 = imgTags1.split(' ');                     
                        $.each(imgTags1, function( index, value ) {                                             
                           $('<span style="padding-left:4px;"/>').html($("<a>"+imgTags1[index]+"</a>").attr("href", imgTags1[index])).appendTo(container).click(function(data){
                              alert($(this).text());
                              displayTagImages(data);
                           });                                               
                        });                 
                        $("#image-container").append( container);                        
                        if (i == 9) return false;
                    }                   
                });
            },
            dataType:'jsonp'
       });
  });

function displayTagImages(data){
 var txtVal = data; 
 $('#idSubmit').click(function(){  
  $('#image-container').html("");    
    $.ajax({
            type:'GET',
            url:"http://api.flickr.com/services/feeds/photos_public.gne?tags="+txtVal,
            data:"&lang=en-us&format=json&jsoncallback=?",
            success:function(data) {
                $.each(data.items, function(i, item) {      
                    if (item.media.m){
                        var container = $("<div/>");                        
                        var tagImgs = $("<img/>").attr("src", item.media.m).appendTo(container);
                        var imgTitle = $("<p/>").html('<b>Title</b> : ' + item.title).appendTo(container)
                        var imgTags = $("<p/>").html('<b>Tags</b> : ' + item.tags).appendTo(container);                                                                                 
                        var imgTags1 = item.tags;
                        var imgTags1 = imgTags1.split(' ');                     
                        $.each(imgTags1, function( index, value ) {                                             
                           $('<span style="padding-left:4px;"/>').html($("<a>"+imgTags1[index]+"</a>").attr("href", imgTags1[index])).appendTo(container);                                           
                        });                 
                        $("#image-container").append( container);                        
                        if (i == 9) return false;
                    }                   
                });
            },
            dataType:'jsonp'
       });
  });
}

这是jsfiddle

Answer 1

我不确定我理解你的观点，但试试这个：

$('#idSubmit').click(function() {

    displayTagImages($('#idText').val());
});

function displayTagImages(data) {

    var txtVal = data;
    $('#idText').val(data);
    $('#image-container').html("");
    $.ajax({
        type : 'GET',
        url : "http://api.flickr.com/services/feeds/photos_public.gne?tags=" + txtVal,
        data : "&lang=en-us&format=json&jsoncallback=?",
        success : function(data) {

            $.each(data.items, function(i, item) {

                if (item.media.m) {
                    var container = $("<div/>");
                    var tagImgs = $("<img/>").attr("src", item.media.m).appendTo(container);
                    var imgTitle = $("<p/>").html('<b>Title</b> : ' + item.title).appendTo(container)
                    var imgTags = $("<p/>").html('<b>Tags</b> : ' + item.tags).appendTo(container);
                    var imgTags1 = item.tags;
                    var imgTags1 = imgTags1.split(' ');
                    $.each(imgTags1, function(index, value) {

                        var txt =  imgTags1[index] ;
                        $('<span style="padding-left:4px;"/>').html($("<a>" + imgTags1[index] + "</a>").attr("href", imgTags1[index])).appendTo(
                                container).click(function(data) {

                            displayTagImages(txt);
                            return false;
                        });

                    });
                    $("#image-container").append(container);
                    if (i == 9)
                        return false;
                }
            });
        },
        dataType : 'jsonp'
    });
}

http://jsfiddle.net/rooseve/r3vYW/4/

如何使用jquery在另一个ajax调用中调用ajax？

1 个答案: