Question

我正在尝试使用此api构建一个随机引用机器：https://market.mashape.com/andruxnet/random-famous-quotes

这是我的JS

var second = new function() {
    $.ajax({
      headers: {
        'X-Mashape-Key': '3VGdwZHnCqmshmfxz0pqt0388GZ0p1Ahg2DjsniAt12zxxJLpF',
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json'
      },
      url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=movies',
      sucesss: function(response) {
        var ape = JQuery.parseJSON(response)
        var quoteText = ape.quote;
        var quoteAuthor = ape.author;

        $('#AJ').click(function (quoteText, quoteAuthor){
          $(".quoteText").html(quoteText);
          $(".quote-author").html(quoteAuthor);
      });
    }
    });
  };

$(document).ready(second);

我试图让JSON在每次点击时更新DOM。

Answer 1

你的函数有两个参数，但是它被绑定到一个不提供这些参数的元素，或者至少不是你要它提供的信息。

你真正想要的是你的onclick调用ajax，并使用响应填充内部html。

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

          }
        });
      });

Answer 2

问题在于您最初提出请求，然后触发点击事件以将文本更改为已获取的值。您需要重新构建代码以在单击时发送请求，然后在收到响应时更新文本。通过将回调函数传递给您的请求最容易实现。

function requestNewQuote(callback) {
  $.ajax({
    headers: {
      'X-Mashape-Key': '3VGdwZHnCqmshmfxz0pqt0388GZ0p1Ahg2DjsniAt12zxxJLpF',
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': 'application/json'
    },
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=movies',
    sucesss: callback
  });
}

$(document).ready(function() {
  $('#AJ').click(function () {
    requestNewQuote(function(response) {
      var ape = JQuery.parseJSON(response)
      $(".quoteText").html(ape.quote);
      $(".quote-author").html(ape.author);
    });
  });

});

无法使用JQuery从API更新带有JSON数据的html

2 个答案: