Question

我是使用JavaScript的新手，所以请原谅我的坏术语。

我有一个jQuery，它调用字典Web服务的API，整个函数按原样运行（返回所有定义，作者等）。

但我的问题是来自API的返回数据会返回一个大的文本块，而不是整齐的格式，每个定义之间都有行间距。

如果我只是在网络浏览器中搜索网址，我会得到一个带有整洁定义和间距的json响应。

以下是我对API服务和返回数据的搜索。

http://epvpimg.com/MkdEg

以下是通过网络浏览器使用我的代码中的URL进行的搜索（我认为在我的网络服务中返回时应该看起来如何）

http://epvpimg.com/IWLJf

有没有人以前见过这个问题，或者知道为什么，从我的代码来看，它正在这样做！

非常感谢任何帮助！

$(document).ready(function(){

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

var getDefinition = function(){

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

 if(word === ''){

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

 } 

else {

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

    $.getJSON("http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase=&pretty=true" +word+ "?callback=?", function(json) {

       if (json !== "No definition has been found."){
           var reply = JSON.stringify(json,null,"\t");
           var n = reply.indexOf("meanings");
           var sub = reply.substring(n+8,reply.length);
           var subn = sub.indexOf("]");
           sub = sub.substring(0,subn);
             $('#definition').html('<h2 class="loading">We found you a definition!</h2><h3>'+sub+'</h3>');

          } 

else {
             $.getJSON("http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase=&pretty=true" + "?callback=?", function(json) {
                console.log(json);
                $('#definition').html('<h2 class="loading">Nothing found.</h2><img id="thedefinition" src=' + json.definition[0].image.url + ' />');
             });
          }
     });

  }

return false;
};

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

});

和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>
    <script src="dictionary.js"></script>
    <link rel="stylesheet" href="style.css" />

</head>

<body>

    <div id="container">

        <div id="top">

            <header>

                <h1>Dictionary Application</h1>

            </header>

        </div>

        <div id="app">

            <input type="text" placeholder="Enter a word..." id="term" />
            <button id="search">Define!</button>

        <section id="definition">

        </section>

        </div>

        <footer>

            <p>Created by Matthew Hughes</p>

        </footer>

    </div>

</body>

Answer 1

你为JSON.stringify提供了第三个参数，它可以打印出结果。所以sub应该有你想要的换行符。问题是你将它放在HTML文档中，HTML会自动合并行。您可以使用<pre>标记阻止此操作：

$('#definition').html('<h2 class="loading">We found you a definition!</h2><br><pre>'+sub+'</pre>');

jQuery返回的数据并不整齐

1 个答案: