jQuery返回的數據不整潔

我是新來的使用JavaScript，所以請原諒我不好的術語。jQuery返回的數據不整潔

我有一個jQuery調用詞典Web服務的API，整個函數按原樣工作（返回所有定義，作者等）。

但我的問題是，從API返回的數據返回到一個大的文本塊，而不是以每個定義之間的行間距的整齊格式。

如果我只是在網絡瀏覽器中搜索URL，我會收到一個json響應，其中包含整潔的定義和間距。

這是我在服務中搜索API和返回的數據。

http://epvpimg.com/MkdEg

這裏只是利用我的代碼的URL通過Web瀏覽器（我怎麼覺得應該看在我的web服務返回時）搜索

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>

來源

2014-03-13 omgched

您的瀏覽器正在添加換行符。 JSON沒有格式。 –

無論如何將鏈接中斷添加到我在javascript中返回的數據？ – omgched

原始的JSON有換行符，但是您調用'$ .getJSON'。將JSON解析爲一個Javascript對象，這只是數據。然後你調用'JSON.stringify'，它產生一個無格式的JSON字符串。 – Barmar

你提供第三個參數JSON.stringify，其漂亮，打印出結果。所以sub應該有你想要的換行符。問題在於你把它放在一個HTML文檔中，HTML會自動合併行。您可以通過使用<pre>標記來防止此問題：

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

來源

2014-03-13 21:05:58 Barmar

我改變了這一行代碼，現在它不從API中檢索任何數據。 - 只停留在「你的定義正在進行中！」 – omgched

這條線與檢索數據無關，只是顯示結果的方式。你可能打錯了什麼，檢查你的JS控制檯。 – Barmar

http://epvpimg.com/fJAeb 看起來好多了，謝謝Barmar !,現在只是爲了解決如何刪除縮進！ – omgched

jQuery返回的數據不整潔

回答

相關問題