Question

我是JSON和Web开发人员的新手。如果我不能以适当的方式提出问题，请原谅我。

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

我试过firefox和chrome。他们俩都给了我不同的错误。

Firefox =＆＃34; SyntaxError：missing;在陈述之前

Chrome =＆＃34;未捕获的SyntaxError：意外的令牌：＆＃34;

我已经通过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/

回复数据如下：{＆＃34; To＆＃34;：＆＃34; MYR＆＃34;，＆＃34; From＆＃34;：＆＃34; SGD＆＃34;，＆＃34 ;速率＆＃34;：＆＃34; 2.5666＆＃34;}

Answer 1

1）var info = JSON.parse(data);此行不需要

2）alert(rate);什么是rate？

3）.click(function loadRate()此处的功能不应该只有.click(function()

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

时，jquery会自动解析json

Answer 2

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

如果URL包含字符串＆＃34; callback =？＆＃34; （或类似的，由服务器端API定义），请求被视为JSONP。有关详细信息，请参阅jsonp中$.ajax()数据类型的讨论。

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

正如您在响应中看到的那样，它是JSON，而不是函数调用。如果你将它直接放入控制台（将其评估为JS），你将得到相同（或类似）的错误：

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

如果您删除jsoncallback=?部分，you get a different error：

XMLHttpRequest无法加载http://rate-exchange.herokuapp.com/fetchRate?from=SGD&to=MYR&lang=en-us&format=json。请求的资源上不存在'Access-Control-Allow-Origin'标头。起源＆＃39; ...＆＃39;因此不允许访问。

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

另请参阅：Ways to circumvent the same-origin policy

Answer 3

首先，@ Felix Kling关于使用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>

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

3 个答案: