jQuery＆Ajax-地名自动完成和从Foursquare请求信息

bucek 发表于 Dev

布切克

我想从我的名字（从地名）中找到城市的名称（从foursquare API），但是不幸的是，它不起作用。我可以看到它从地理名称上传了名称，但没有显示场地的结果。

<script type="text/javascript">
$(function() {
    function log( message ) {
        $( "<div>" ).text( message ).prependTo( "#log" );
        $( "#log" ).scrollTop( 0 );
    }
    $( "#muni" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 15,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name + ", " + item.countryName
                        }
                    }));
                }    
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);

            $.ajax({ 
                url : "https://api.foursquare.com/v2/venues/search?client_id=xxx&client_secret=xxx&v=20131212&format=JSONP&callback=x&limit=1&near=" + ui.item.value, 
                dataType : "jsonp",
                success : function(parsed_json) {
                    $("#name").text(parsed_json.response.venues.name);
                    $("#direccion").text(parsed_json['response']['venues']['location']['address']);
                    $("#postcode").text(parsed_json['response']['venues']['location']['postalCode']);
                    $("#city").text(parsed_json['response']['venues']['location']['city']);
                    $("#country").text(parsed_json['response']['venues']['location']['country']);           
        } 
            });                 


        },
        open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
    });
});

function getInfo(){
    $.ajax({ 
        url : "https://api.foursquare.com/v2/venues/search?client_id=xxx&client_secret=xxx&v=20131212&format=JSONP&callback=x&limit=1&near=" + $("#muni").val(), 
        dataType : "jsonp",
        success : function(parsed_json) {
            $("#name").text(parsed_json.response.venues.name);
            $("#direccion").text(parsed_json['response']['venues']['location']['address']);
            $("#postcode").text(parsed_json['response']['venues']['location']['postalCode']);
            $("#city").text(parsed_json['response']['venues']['location']['city']);
            $("#country").text(parsed_json['response']['venues']['location']['country']);           
        } 
    }); 
}


</script>

接着...

<input type="text" id="muni"></input>
<p onclick="getInfo()">Get all info about venue</p>

<table id="t">
    <tr>
        <th>Venue name</th>
        <th>Venue location-<br>address</th>
        <th>Venue location-<br>postcode</th>
        <th>Venue location-<br>city</th>
        <th>Venue location-<br>country</th>        
    </tr>
    <tr>
        <td id="name"></td>
        <td id="direccion"></td>
        <td id="postcode"></td>
        <td id="city"></td>
        <td id="country"></td>        
    </tr>
</table>

谢谢！

马努文杰夫

您没有正确解析。根据4square API中的测试控制台，在返回的JSON中没有场所对象。这就是我解析它的方式，并且正在起作用：

var index;
var obj = jQuery.parseJSON( parsed_json);

for(index = 0; index < obj.response.groups[0].items.length ; index++)
{
 console.log('id: ' + obj.response.groups[0].items[index].venue.id );
 console.log('Addr: ' + obj.response.groups[0].items[index].venue.location.address );
 console.log('ZIP Code: ' + obj.response.groups[0].items[index].venue.location.postalCode );
 console.log('City: ' + obj.response.groups[0].items[index].venue.location.city );
 console.log('Country: ' + obj.response.groups[0].items[index].venue.location.country );
}

希望能帮助到你

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。