jQuery / JSON 无法调用 API答案

【问题标题】：jQuery / JSON unable to call an APIjQuery / JSON 无法调用 API
【发布时间】：2014-03-07 03:42:19
【问题描述】：

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

谢谢。

【问题讨论】：

您正在尝试跨域请求。 See this comment

标签： javascript jquery json api

【解决方案1】：

因为是跨域调用。由于同源策略，浏览器会阻止它。如果您尝试制作跨域 ajax，则应该在 ajax 中使用 CORS。服务器也应该启用它。跨域 ajax 的另一种方法是使用 jsonp。

【讨论】：

你能解释一下json是做什么的吗？

【解决方案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 字段。

【讨论】：

这行得通吗？还是我仍然会遇到跨域请求的问题？有什么简单的解决方法吗？
效果很好！清理 JSON 输出的最简单方法是什么？你能告诉我我做错了什么吗？
@Spencer 您刚刚进行了错误的连接，film 变量的值已附加到pretty=true。 clean up the JSON output 是什么意思？
有道理，谢谢你的解释。目前我从 Glosbe 收到的 JSOn 输出只是一大块 JSON？有什么方法可以清理它并使其更具可读性输出？
@Spencer 好吧，如何解析它取决于您自己。