使用Ajax將Json / Jsonp數據放入表單

Question

中文地圖服務“騰訊地圖”提供了一個Json / Jsonp URL來獲取位置信息，該URL類似於：

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

假設我將緯度和經度填寫到表單中，如何使用JS / JQ獲取Json日期，並將“ pois”（在json-> result-> pois中）數據填充到表單中的下拉菜單中形成？

我寫的html是這樣的：

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

Js是：（為使其成為jsonp，我在網址中添加了“？output = jsonp”以使其成為Jsonp以避免跨域錯誤）

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

我的目標是將Jsonp中的所有Pois日期加到該下拉選項中，但是經過反復嘗試，我什至無法獲得該日期。

您能指出我代碼的錯誤嗎？ 那將非常有幫助！

我在這里放了一個樣本，以便您可以測試我的MISTAKE http://fireso.com/geo.html

PS，我無法修改服務器零件代碼，而必須在其他域中使用api，因此唯一的方法是使用html js零件。

感謝您的任何幫助！

Answer 1

從jQuery ajax API中：成功函數傳遞了三個參數：從服務器返回的數據，根據dataType參數或dataFilter回調函數（如果已指定）進行了格式化，該字符串描述了狀態； 和jqXHR對象（在jQuery 1.4.x中為XMLHttpRequest）。

在成功內部，使用data參數，這是服務器的答案，因此，如果使用console.log(data) ，則會看到您正在尋找的json對象。

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