JSON：收到的响应，但无法在jQuery中显示它

问题描述：

我是JSON和Web开发人员的新手。因此，如果我无法以适当的方式提出问题，请原谅我。JSON：收到的响应，但无法在jQuery中显示它

以下是我从站点收到JSON响应的情况，但无法显示响应数据并在控制台中提示出错。

我试过Firefox和Chrome。他们两个给了我不同的错误。

火狐=“语法错误：缺少;语句之前

铬= “未捕获的SyntaxError：。意外标记：”

我已经尝试过的jQuery API调用的两种下面是我的示例代码

<html> 
<body> 
    <button>Click Me!</button> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script> 
     $("button").click(function() 
     { 
      $.getJSON("http://rate-exchange.herokuapp.com/fetchRate?from=SGD&to=MYR&lang=en-us&format=json&jsoncallback=?", function(data) { 
        console.log(data); 
        var info = JSON.parse(data); 
        alert(rate); 
       });  
     }) 
    </script> 
</body></html> 



    <html> 
<body> 
    <button>Click Me!</button> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script> 
     $("button").click(function loadRate() 
     { 
      $.ajax({ 
       type:'GET', 
       url:"http://rate-exchange.herokuapp.com/fetchRate", 
       data:"from=SGD&to=MYR"+"&lang=en-us&format=json&jsoncallback=?", 
       dataType:'json', 
       success:function(resp){ 
        var parse = JSON.parse(resp); 
        alert(parse.Rate); 
       } 
      }); 
     }) 
    </script> 
</body></html>

而JSON API我指的是：http://rate-exchange.herokuapp.com/

响应d ATA是这样的：{ “要”： “MYR”， “从”： “新元”， “速度”： “2.5666”}

答

1）var info = JSON.parse(data);在这一行

2）alert(rate);不需要什么是rate？这里

3）.click(function loadRate()功能不应该有任何名字，只是.click(function()

4）var parse = JSON.parse(resp);没有必要，jQuery的自动解析JSON，当你告诉dataType:'json'

3）为什么不呢？命名函数表达式没有任何问题。尽管您列出的所有内容都可能是正确的，但它们都没有解决真正的问题，即在JSONP预期时正在加载JSON。 – 2014-10-01 16:24:49

@FelixKling看看API，它会返回JSON，而不是JSONP。与'jsoncallback'有关的部分来自其他地方。 – Cheery 2014-10-01 16:27:41

我知道它返回JSON。这就是OP获取错误信息的原因。 jQuery期望JSONP，而不是JSON。 – 2014-10-01 16:28:59

答

至少在第一种情况下，你是indirectly tell jQuery to expect JSONP ：

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

JSONP是什么都没有，但动态地添加一个<script>元素和评估一些JavaScript （它实际上与JSON无关）。但是，它必须得到服务器的支持，因为服务器必须返回一个JavaScript函数调用，而不仅仅是普通的JSON。

正如你可以看到的响应，它是JSON，而不是函数调用。如果你把它直接进入控制台（将其评价为JS），你会得到相同（或类似）错误：如果删除jsoncallback=?部分，you get a different error

> {"To":"MYR","From":"SGD","Rate":"2.5666"} 
SyntaxError: Unexpected token :

：

XMLHttpRequest cannot load http://rate-exchange.herokuapp.com/fetchRate?from=SGD&to=MYR&lang=en-us&format=json . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '...' is therefore not allowed access.

的API似乎不支持JSONP或CORS，因此您无法直接向服务发出Ajax请求。您必须找到不同的方式来访问访问权限，例如通过自己或公共代理（例如：https://github.com/Rob--W/cors-anywhere）

参见：Ways to circumvent the same-origin policy

当然，作为替代方案，您可以要求此服务的开发人员启用CORS。 – 2014-10-01 22:36:04

答

其一，@Felix克林的有关使用JSONP回调的响应是真实的，所以删除。

其次，你使用的是一个非常老的jQuery版本，我建议你升级到1.11.1。

这是一个正常运作的例子：

<html> 
    <body> 
     <button>Click Me!</button> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script> 
      $(function() { 
       $("button").click(function() { 
        var url = "http://rate-exchange.herokuapp.com/fetchRate?from=SGD&to=MYR&lang=en-us&format=json"; 
        $.getJSON(url) 
         .done(function (result) { 
          console.log('Success: ', result); 
         }) 
         .fail(function() { 
          console.log('Fail'); 
         }); 
       }); 
      }); 
     </script> 
    </body> 
</html>

正如我在我的回答中也提到的，这个API没有启用CORS，所以你不能向它发出Ajax请求。见：http://jsfiddle.net/vnmmurqc/ – 2014-10-01 22:34:30

你说得对。起初我没有看到CORS问题，因为我从本地文件进行测试，该文件不受JavaScript中的跨域安全性限制。 – 2014-10-01 23:26:34

JSON：收到的响应，但无法在jQuery中显示它

相关推荐