Question

我正在尝试使用jQuery在lib.com/a-api上使用网络服务。谁能告诉我为什么我的代码下面没有返回任何结果？我希望用一个单词来查询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>

感谢。

Answer 1

因为这是一个跨域调用。浏览器会因同源策略而阻止它。如果你想创建跨域ajax，你应该在你的ajax中使用CORS。服务器也应该启用它。跨域ajax的另一种方法是使用jsonp。

Answer 2

如果您尝试提出请求，则会出现400 Bad request错误。在您的代码中查看URL：

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

您输错了，正确的网址应为

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

jQuery自动检测“callback =？”并切换到JSONP格式。这对我来说很好。但请注意，响应没有posters字段。

jQuery / JSON无法调用API

2 个答案: