Question

我有一个jquery脚本从api中引用引号，数据以json格式返回。然后我试图将输出显示在页面上。但由于某种原因，我无法从api获取数据。我在这做错了什么？感谢

<html>
<head>
<title>Qoute Machine</title>
  <script>
    $(document).ready(function() {
  $("#getMessage").on("click", function(){
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
  $("#quote").html(JSON.stringify(a.content + " " + a.title));
});
});
  </script>
</head>
<body>
<h1>Welcome to Random Quotes!</h1>
<p>Press the button to display a quote!.</p>
  <button id="getMessage" type="button" onclick="getQuote();">Get quote</button>
  <p id="quote"></p>

</body>
</html>

Answer 1

a已经被解析为JSON，因此您不需要将其字符串化以输出由空格分隔的a两个属性。事实上，这甚至都不是有效的JSON。

您正在尝试将非JSON字符串化。只需使用：

$("#quote").html(a.content + " " + a.title);

但是，请在下面的代码段中注明该请求存在跨域问题：

$("#getMessage").on("click", function() {
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
      $("#quote").html(a.content + " " + a.title);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Welcome to Random Quotes!</h1>
<p>Press the button to display a quote!.</p>
<button id="getMessage" type="button">Get quote</button>
<p id="quote"></p>

Answer 2

代码末尾缺少});而您不需要JSON.stringify，因为getJSON会返回json或javascript对象，您也不需要onclick="getQuote();"，因为它已经由jQuery $("#getMessage").on("click"处理。最后一个如果它从不同的域访问，那么你需要启用跨源（CORS）

演示，允许CORS：https://jsfiddle.net/ng5ut2L5/1/

下面，不允许使用stackoverflow CORS

$(document).ready(function() {
  $("#getMessage").on("click", function() {
    $.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
      $("#quote").html(a[0].content + " " + a[0].title);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Welcome to Random Quotes!</h1>
<p>Press the button to display a quote!.</p>
<button id="getMessage" type="button">Get quote</button>
<p id="quote"></p>

为什么这个jquery没有显示json响应

2 个答案: