웹 프로그래밍 클래스에서 taxifarefinder API를 사용하여 사이트 간 요청을 수행하는 방법을 알아 봅니다. Google 크롬 개발자 도구를 사용하고 있습니다. 아래 코드를 실행하면 올바른 응답 (코드 블록 다음에 표시)이 표시됩니다. 그러나 csCall 변수에서 출발지와 목적지에 대해 다른 매개 변수를 전달할 수 있어야합니다.JSONP를 사용하여 원격 Ajax 호출에서 콜백 오류가 잘못되었습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Working Echo Client</title>
<meta charset="UTF-8" />
<script>
function jsonp(url) {
var head = document.head;
var script = document.createElement("script");
script.setAttribute("src", url);
console.log(script);
head.appendChild(script);
head.removeChild(script);
}
function jsonpCallback(data) {
document.getElementById("response").textContent = JSON.stringify(data);
}
var csCall ="http://api.taxifarefinder.com/fare?key=mUnes8afrE3a&entity_handle=Boston&origin=42,-71&destination=42,-71.5&callback=jsonpCallback"
jsonp(csCall);
</script>
</head>
<body>
<span id="response"></span>
</body>
</html>
응답 : 리소스 스크립트로 해석하지만, MIME 타입 text/html과 함께 전송 "http://api.taxifarefinder.com/fare?key=mUnes8afrE3a&entity_handle=Boston&origin=-41,-71&destination=-41,-71.5&callback=jsonpCallback".
이 페이지에 정확하게 표시 { "상태": "OK", "total_fare"7.69 "initial_fare"2.6, ..., "거리"1,849 "기간"232}
그래서 나는 원점과 목적지 매개 변수를 구성하는 경도와 위도를 가져 와서 호출하려고했지만 함수를 만들려고 시도했지만 코드를 따르는 오류 메시지가 나타납니다. 콘솔에
<!DOCTYPE html>
<html lang="en">
<head>
<title>Working Echo Client</title>
<meta charset="UTF-8" />
<script>
function jsonp(url) {
var head = document.head;
var script = document.createElement("script");
script.setAttribute("src", url);
head.appendChild(script);
head.removeChild(script);
}
function jsonpCallback(data) {
document.getElementById("response").textContent = data;
}
function makeCall(oLat, oLon, dLat, dLon) {
var oLat = parseFloat(oLat);
var oLon = parseFloat(oLon);
var dLat = parseFloat(dLat);
var dLon = parseFloat(dLon);
csCall = "http://api.taxifarefinder.com/fare?key=mUnes8afrE3a&entity_handle=Boston&origin=" + oLat + "," + oLon + "&destination=" + dLat + "," + dLon + "&callback=" + jsonpCallback;
}
var csCall;
makeCall(-42, 71, -42, 71.5);
jsonp(csCall);
</script>
</head>
<body>
<span id="response"></span>
</body>
</html>
응답 : 리소스 스크립트로 해석되지만 MIME 타입 텍스트/HTML로 전송 "http://api.taxifarefinder.com/fare?key=mUnes8afrE3a&entity_handle=Boston&or ... lementById (%의 22response 22 %) .textContent % = 20 % 20data; % 20 % 20 % 20 % 20 % 20 % 20 % 20 % 20} ".
catch되지 않은 구문 에러 : 예기치 않은 토큰 : 요금 : 1 내가 요금을 클릭 : 1 내가 이것을 볼 소스 탭으로 이동하고있다 : { "상태": "INVALID_CALLBACK"}. 누군가 내가 잘못된 콜백을 일으킬 수있는 잘못된 일을 알고 있습니까? 내가 보는 유일한 변화는 uri를 연결하는 함수가 추가 된 것입니다.