Question

中国地图服务＆＃34;腾讯地图＆＃34;提供了一个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日期并填充＆＃34; pois＆＃34;（在json-＆gt;结果中 - ＆gt; 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我添加＆＃34;？output = jsonp＆＃34;在url中使其成为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日期添加到下拉选项中，但经过尝试和尝试后，我甚至无法获得日期....

你能指出我的代码的错误吗？那会非常有用！

我在这里放了一个示例，以便您可以测试我的错误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);
    }});
 });

使用ajax将Json / Jsonp数据放入表单

1 个答案: