Put Json/Jsonp data to a form using ajax

Question

The chinese map service "Tencent map" provides a Json/Jsonp URL to get the location information, the URL is like:

http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&get_poi=1

Assume that I fill the latitude and longitude into a form, how to use JS/JQ to get the Json date and fill the "pois"(which in the json-> result -> pois ) data to a drop-down menu in the form?

The html I wrote is like:

<from>
    <lable>Oraginal GPS coordinates</lable></br>
    <input type="text" id="geo_latitude" name="geo_latitude" value="39.86343486063931">
    <input type="text" id="geo_longitude" name="geo_longitude" value="116.37321682380312">
<button onclick="getLocation()">GET it</button>
    <select id="geo_spot" name="geo_spot">
        <option></option>
    </select>
</form>

The Js is:(to make it jsonp I added "?output=jsonp" in the url to make it Jsonp to avoid Cross domain error)

    jQuery(document).ready(function(){
        var lat = parseFloat(document.getElementById("geo_latitude").value);
        var lng = parseFloat(document.getElementById("geo_longitude").value);
       var url='http://apis.map.qq.com/ws/geocoder/v1/?output=jsonp&location='+lat+','+lng+'&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&get_poi=1&callback=?';
       jQuery.ajax({
         url:url,
         dataType:'jsonp',
         processData: true,
         type:'get',
         jsonp: "callback",
         contentType: "application/jsonp; charset=utf-8",
         success:function(data){
           alert(jsonp.result.pois);
         },
         error:function(XMLHttpRequest, textStatus, errorThrown) {
           alert(XMLHttpRequest.status);
           alert(XMLHttpRequest.readyState);
           alert(textStatus);
         }});
       });

My target is to add up all Pois date in Jsonp into that drop down options, but after tried and tried, I can't even get the date....

Can you point out the mistake of my code? That would be very helpful!

I put a sample here so you can test my MISTAKE http://fireso.com/geo.html

PS, I can't modify the server part code, and have to use the api in a different domain, so the only way is working with the html js part.

Thank you for any help!

Answer 1

From the jQuery ajax API: The success function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter or the dataFilter callback function, if specified, a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object.

Inside your success use the data parameter, this is the answer from the server, so if you use console.log(data) you'll see the json object you are looking for.

jQuery.ajax({
    url:url,
    dataType:'jsonp',
    processData: true,
    type:'get',
    jsonp: "callback",
    contentType: "application/jsonp; charset=utf-8",
    success:function(data){
        console.log(data);
        // this should exists (if service sends it)
        alert(data.result.pois);
    },
    error:function(XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest.status);
        alert(XMLHttpRequest.readyState);
        alert(textStatus);
    }});
 });