jQuery API 不适用于 JavaScript答案

【问题标题】：jQuery API not working with JavaScriptjQuery API 不适用于 JavaScript
【发布时间】：2016-07-12 05:15:42
【问题描述】：

使用 Mashape API 进行随机引用，但点击时没有任何反应。下面是JS和HTML。 JS代码有问题吗？当我单击按钮时，什么也没有发生。引用未出现在 div 中。谢谢！

$('#getQuote').click(function (){
        $.ajax({
          headers: {
            'X-Mashape-Key': 'nrXbQkfuWEmshxvDCunSMptEn0M0p1jHWCijsnX9Ow18j8TXus',
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept': 'application/json'
          },
          method:'POST',
          dataType: 'json',
          url: 'https://andruxnet-random-famous-quotes.p.mashape.com/',
          success: function(response) {
            var ape = JQuery.parseJSON(response)
            var quoteText = ape.quote;
            var quoteAuthor = ape.author;
            $(".quote").html(quoteText);
            $(".author").html(quoteAuthor);}
        });
      });



<body>
  <div class = "quote">quote</div>
  <div class = "author">author</div>
  <div id="button">
  <button id="getQuote">Get Quote</button>
  </div>
</body>

【问题讨论】：

任何控制台错误？
您的代码示例不清楚。 js 应该包含在一个“脚本”标签中。你应该把它放在文档准备好的函数中，以便能够绑定 dom 元素。
你的 javascript 在按钮出现在 html 之前运行，你应该尝试把它放在 html 加载下面，以便 jquery 可以绑定到该事件
@MarioAlexandroSantini 抱歉，这不是更清楚，但 JS 与 HTML 位于单独的文件中。为简洁起见，仅粘贴了相关部分。

标签： javascript jquery ajax mashape

【解决方案1】：

防止默认点击事件，去掉对数据的解析：

$(function(){
    $('#getQuote').click(function (e){
            e.preventDefault();
            $.ajax({
              headers: {
                'X-Mashape-Key': 'nrXbQkfuWEmshxvDCunSMptEn0M0p1jHWCijsnX9Ow18j8TXus',
                'Content-Type': 'application/x-www-form-urlencoded',
                'Accept': 'application/json'
              },
              method:'POST',
              dataType: 'json',
              url: 'https://andruxnet-random-famous-quotes.p.mashape.com/',
              success: function(response) {
                var ape = response//remove the parsing
                var quoteText = ape.quote;
                var quoteAuthor = ape.author;
                $(".quote").html(quoteText);
                $(".author").html(quoteAuthor);}
            });
          });
});

https://jsfiddle.net/cyLyn8ba/

【讨论】：

这行得通，现在只希望我知道更多关于为什么。需要阅读解析文档。非常感谢。
如果有人遇到这个问题，this question 会解释 JSON 解析以及为什么包含它会返回 null。

【解决方案2】：

jquery 足够智能，可以自己解析 json 响应，因此您需要删除解析功能，一切都应该正常工作:)

$('#getQuote').click(function (){
    $.ajax({
      headers: {
        'X-Mashape-Key': 'nrXbQkfuWEmshxvDCunSMptEn0M0p1jHWCijsnX9Ow18j8TXus',
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json'
      },
      method:'POST',
      dataType: 'json',
      url: 'https://andruxnet-random-famous-quotes.p.mashape.com/',
      success: function(response) {
        var ape = response;
        var quoteText = ape.quote;
        var quoteAuthor = ape.author;
        $(".quote").html(quoteText);
        $(".author").html(quoteAuthor);}
    });
  });

codepen example

【讨论】：