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」}

來源

2014-10-01 lazykoala

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'

來源

2014-10-01 16:17:34 Cheery

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

來源

2014-10-01 16:28:25

當然，作爲替代方案，您可以要求此服務的開發人員啓用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>

來源

2014-10-01 17:32:27

正如我在我的回答中也提到的，這個API沒有啓用CORS，所以你不能向它發出Ajax請求。見：http://jsfiddle.net/vnmmurqc/ – 2014-10-01 22:34:30

你說得對。起初我沒有看到CORS問題，因爲我從本地文件進行測試，該文件不受JavaScript中的跨域安全性限制。 – 2014-10-01 23:26:34

JSON：收到的響應，但無法在jQuery中顯示它

回答

相關問題