2014-12-20 2 views
1

중국지도 서비스 "텐센트 맵은"위치 정보를 얻을 수있는 JSON/JSONP URL을 제공을 사용하여 URL과 같은 것입니다 :넣어 JSON/JSONP 데이터 아약스

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

가 I 가정 위도와 경도를 양식으로 채우고 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를 만들기 위해 URL에 내가 추가 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의 모든 관심 장소 날짜를 추가하는 것입니다,하지만 노력과 시도 후, 나는 심지어 날짜를 얻을 수

....

당신은 실수를 지적 할 수 내 코드? 그것은 매우 도움이 될 것입니다! 당신이 내 실수 테스트 할 수 있습니다 http://fireso.com/geo.html

PS, I는 서버의 일부 코드를 수정할 수 없으며, 다른 도메인에있는 API를 사용하려면, 그래서 유일한 방법은 함께 일하고있다, 그래서 내가 여기에 샘플을 넣어

html js 부분.

도움 주셔서 감사합니다.

+1

당신의 성공 안에 시도해보십시오. console.log (데이터)를 사용해보십시오 - 당신에게 필요한 것을 줄 것이라고 생각합니다. –

답변

0

jQuery ajax API : success 함수에는 세 가지 인수가 전달됩니다. 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); 
    }}); 
}); 
+0

Axel, 고맙습니다. 내 문제를 해결했습니다! 당신이 가르쳐 준 것처럼 코드를 수정했습니다, 완벽하게 작동합니다! – freeduke