Question

我在网络编程课程中，试图找出如何使用taxifarefinder API进行跨站点请求。我正在使用Google Chrome的开发人员工具。当我运行下面的代码时，我得到正确的响应（代码块后显示）。但是，我需要能够在csCall变量中传递源和目标的不同参数。

<!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传输：＆＃34; http://api.taxifarefinder.com/fare?key=mUnes8afrE3a&entity_handle=Boston&origin=-41,-71&destination=-41,-71.5&callback=jsonpCallback＆＃34;。

这在页面上准确显示：{＆＃34; status＆＃34;：＆＃34; OK＆＃34;，＆＃34; total_fare＆＃34;：7.69，＆＃34; initial_fare＆＃34;：2.6 ，...，＆＃34;距离＆＃34;：1849，＆＃34;持续时间＆＃34;：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类型text / html传输：＆＃34; 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}＆＃34 ;.

Uncaught SyntaxError：意外的令牌：票价：1 当我点击票价时：1我被重定向到我看到的源选项卡： {＆＃34;状态＆＃34;：＆＃34; INVALID_CALLBACK＆＃34;}。有谁知道我做错了什么可能导致无效的回调？我看到的唯一变化是添加了一个连接uri的函数。

Answer 1

将函数附加到字符串与调用函数的toString方法相同，后者返回函数代码。你真正要做的是附加回调的名字。

"http://api.taxifarefinder.com/fare?key=...&entity_handle=Boston"
+ "&origin=" + oLat + "," + oLon 
+ "&destination=" + dLat + "," + dLon 
+ "&callback=jsonpCallback";

另外，请确保回调位于全局命名空间中，否则脚本注入的代码将无法找到并调用它。

使用JSONP的远程Ajax调用中的回调错误无效

1 个答案: