Question

我尝试使用Jquery通过API访问随机引号。我对此非常陌生，所以我确信有一个我看不到的简单解决方案。基本上这是我的HTML代码：

<div class="col-md-6">
  <button id="quoteClick" type="button" class="btn btn-success btn-lg quoteButton text-center btn-block">Get Quote</button>
</div>


  <div class="row">
    <div class="col-md-2">
    </div>
    <div class="col-md-8 show boxed text-center">
      Text
    </div>
    <div class="col-md-2">
    </div>
  </div>

我的JS是这样的：

$(document).ready(function() {
  $("#quoteClick").on("click", function() {
    $.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(json) {
      var html = "";

        json.forEach(function(x) {

          html += "<div class = 'quote'>";


          html += "<h3 '" + x.quoteText + "' "+ "'>";

          html += "</div>";

        });

        $(".show").html(html);

      });
    });
  });

当我使用console.log（json）时，我可以打印我要查询的对象，但是当我实际尝试删除引用并将其打印在我的网页上时，没有任何反应。我正在使用codepen。

Answer 1

您不应该迭代从API获得的对象。如果您查看单个API调用，我看到的结果如下：

{
  "quoteText": "To be thoughtful and kind only takes a few seconds compared to the timeless hurt caused by one rude gesture.",
  "quoteAuthor": "Byron Pulsifer",
  "senderName": "",
  "senderLink": "",
  "quoteLink": "http:\/\/forismatic.com\/en\/4255d6ba93\/"
}

您只需要删除forEach调用，您的代码就可以正常工作。

另外（gavgrif在他们的回答中首先注意到这一点），你的HTML格式不正确 - 你应该把文本放在h3里面。

这应该更好：

$(document).ready(function() {
    $("#quoteClick").click(function() {
        $.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(json) {
            var html = "";
            html += "<div class = 'quote'>";
            html += "<h3>" + json.quoteText + "</h3>";
            html += "</div>";
            $(".show").html(html);
        });
    });
});

Jquery命令没有执行，无法看到我做错了什么

1 个答案: