Question

即时通讯使用Flickr api https://www.flickr.com/services/api/explore/flickr.photos.search获取一些照片，我已经获得了照片并且有一个输入，用户可以指定他想要多少照片，事情是，我需要使用getsize闪烁服务，传递给他一个id，然后根据用户点击的位置（我有一些不同大小的按钮）他应该给我特定的大小，但我有一个问题，我的第一个Ajax请求返回一些数据，用xml特定于照片，第二个Ajax请求在第一个成功的内部，给了我特定照片的不同大小我必须通过Id，这里的代码显示了我所谈论的内容：

HTML

<html lang="en">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style type="text/css">
        #sq,
        #lg-sq,
        #thumb,
        #small,
        #mid,
        #ori {
            width: 100%
        }

        input {
            width: 50px;
        }
    </style>
    <script type="text/javascript" src="FlickrPhotosSearch.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>Escolha o tamanho das imagens (em píxeis) que quer visualizar</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" id="sq">Square [75X75]</button>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" id="lg-sq">Large Square</button>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" id="thumb">Thumbnail</button>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" id="small">Small</button>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" id="mid">Medium</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h2>Pesquisa de fotos</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2">
                <input type="text" class="form-control" id="tag">
            </div>
            <div class="col-lg-1">
                <button type="button" class="btn btn-success" id="pesquisar">Pesquisar</button>
            </div>
            <div class="col-lg-1">
                <button type="button" class="btn btn-alert" id="apagar">Apagar</button>
            </div>
            <div class="col-lg-2">
                <input type="text" id="numero" class="form-control" placeholder="numero de fotos">
            </div>
        </div>

        <hr>

        <div class="row">
            <div class="col-md-12">
                <div id="results"></div>
            </div>
        </div>
    </div>

</body>

</html>

的javascript

$(document).ready(function () {
    var numero = 10;
    var clicked = 1;

    $("#sq").click(function(){
        clicked = 1;
    });
     $("#lg-sq").click(function(){
        clicked = 2;
    });
     $("#thumb").click(function(){
        clicked = 3;
    });
     $("#small").click(function(){
        clicked = 4;
    });
     $("#mid").click(function(){
        clicked = 5;
    });

    $("#apagar").click(function () {
        $("#results").html('');
    });

    $('#pesquisar').click(function () {
        $("#results").html('');
        $.ajax({
            url: 'https://api.flickr.com/services/rest/?method=flickr.photos.search',
            dataType: 'xml',
            data: {
                api_key: '2fd41b49fedfd589dc265350521ab539',
                tags: $("#tag").val(),
                format: 'rest'
            },
            success: sucessHandler,
            error: errorHandler

        });

        function sucessHandler(data) {
            var fotos = $(data).find("photo");

            if ($("#numero").val() != "") {
                numero = parseInt($("#numero").val());
                console.log("entrou");
            }

            for (var i = 0; i < numero; i++) {
                $.ajax({
                    url: 'https://api.flickr.com/services/rest/?method=flickr.photos.getSizes',
                    dataType: 'xml',
                    data: {
                        api_key: '2fd41b49fedfd589dc265350521ab539',
                        photo_id: $(fotos[i]).attr('id'),
                        format: 'rest'
                    },
                    success: function(dataSize){
                         console.log(i);
                         var farmId = $(fotos[i]).attr('farm');
                         var serverId= $(fotos[i]).attr('server');
                         var Id = $(fotos[i]).attr('id');
                         var secret = $(fotos[i]).attr('secret');
                         var src = "https://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + Id + "_"+secret+".jpg";

                        $('#results').append("<img src ="+src+" width='100' height='100'>");
                    },
                    error: errorSize

                });
            }

                function errorSize(req, status, err) {
                    console.log("error size");
                }

        }

        function errorHandler(req, status, err) {
            console.log("fail");
        }
    });
});

我总是得到相同的图像，如果我没有具体我想要的照片数量10（var number = 10）但是所有的照片都是相同的，我做了一个控制台日志和[i]总是10，这里有什么问题？：S

为什么我的[i]总是10个Ajax

0 个答案: