jQuery/JSON無法調用API

我試圖通過jQuery使用位於Glosbe.com/a-api的Web服務。任何人都可以告訴我爲什麼我的代碼下面沒有返回任何結果？我期待用一個詞在Glosbe中查詢API，並在下面顯示該詞的定義。jQuery/JSON無法調用API

謝謝。

這是jQuery的我：

$(document).ready(function(){ 

$('#term').focus(function(){ 
    var full = $("#poster").has("img").length ? true : false; 
    if(full === false){ 
    $('#poster').empty(); 
    } 
}); 

var getPoster = function(){ 

    var film = $('#term').val(); 

    if(film === ''){ 

     $('#poster').html("<h2 class='loading'>Ha! We haven't forgotten to validate the form! Please enter something.</h2>"); 

    } else { 

     $('#poster').html("<h2 class='loading'>Your definition is on its way!</h2>"); 

     $.getJSON("http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase=hello&pretty=true" + film + "?callback=?", function(json) { 
      if (json !== "Nothing found."){ 
       $('#poster').html('<h2 class="loading">Well, gee whiz! We found you a definition, skip!</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />'); 
       } else { 
       $.getJSON("http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase=hello&pretty=true" + "?callback=?", function(json) { 
        console.log(json); 
        $('#poster').html('<h2 class="loading">Nothing found.</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />'); 
       }); 
       } 
     }); 

     } 

    return false; 
}; 

$('#search').click(getPoster); 
$('#term').keyup(function(event){ 
    if(event.keyCode === 13){ 
     getPoster(); 
    } 
}); 

});

和HTML：

<!DOCTYPE html> 
<html> 

<head> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta name="author" content="Matthew Hughes"> 
    <meta name="Dictionary" content="A dictionary web service"> 
    <title>Dictionary Web Application</title> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script> 
    <!--jQuery, linked from a CDN--> 
    <script src="dictionary.js"></script> 
    <script type="text/javascript" src="http://use.typekit.com/oya4cmx.js"></script> 
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script> 
    <link rel="stylesheet" href="style.css" /> 

</head> 

<body> 

    <div id="container"> 
     <header> 
      <h1>Dictionary Application</h1> 
     </header> 
     <section id="fetch"> 
      <input type="text" placeholder="Enter a word..." id="term" /> 
      <button id="search">Define!</button> 
     </section> 
     <section id="poster"> 
     </section> 
     <footer> 
      <p>Created by Matthew Hughes</p> 
     </footer> 
    </div> 

</body>

感謝。

來源

2014-03-06 Spencer

您正在嘗試跨域請求。 [請參閱此評論]（http://stackoverflow.com/a/7638786/1430708） – iii

如果您嘗試提出請求，則會收到400 Bad request錯誤。你的代碼就以URL看看：

http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase=hello&pretty=true" + film + "?callback=?"

你已經有了一個錯字，和正確的URL應該是

http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase="+ film + "&pretty=true&callback=?"

jQuery的自動檢測「？回調=」並切換到JSONP格式。這對我來說很好。但請注意，響應沒有posters字段。

來源

2014-03-06 19:18:10 nikis

這個工作嗎？或者我仍然會遇到跨域請求的問題？有沒有簡單的解決方法？ – Spencer

@ user3158814我使jsfiddle http://jsfiddle.net/JMh2E/ – nikis

完美的作品！清理JSON輸出最簡單的方法是什麼？你能告訴我我做錯了什麼嗎？ – Spencer

因爲它是一個跨域調用。瀏覽器會阻止它，因爲同源策略。如果你正在嘗試跨域Ajax，你應該在你的Ajax中使用CORS。服務器也應該啓用它。另一種跨域ajax的方法是使用jsonp。

來源

2014-03-06 18:56:12

可否請您解釋json做了什麼。 – Nagaraju

jQuery/JSON無法調用API

回答

相關問題