jQuery API не работает с JavaScript

Использование Mashape API для случайных кавычек, но ничего не происходит при нажатии. Ниже приведены JS и HTML. Что-то не так с JS-кодом? Когда я нажимаю кнопку, ничего не происходит. Цитата не отображается в div. Благодаря!jQuery API не работает с JavaScript

$('#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>

источник

2016-07-12 Andy

любые ошибки консоли? – madalinivascu

Ваш образец кода не ясен. Js должен быть помещен в тег 'script'. И вы делаете это в функции на готовом документе, чтобы иметь возможность привязываться к элементам dom. –

ваш javascript запущен до того, как кнопка находится в html, вы должны попробовать поместить это под загрузкой html, чтобы jquery мог привязываться к этому событию –

Предотвратить событие по умолчанию нажмите, удалите синтаксический разбор данных:

$(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/

источник

2016-07-12 05:20:49 madalinivascu

Это сработало, теперь просто хочу, чтобы я знал больше о том, почему. Необходимо прочитать документы синтаксического анализа. Большое спасибо. – Andy

Если кто-то сталкивается с этим, [этот вопрос] (http://stackoverflow.com/questions/9111184/why-is-jquery-parsejson-not-necessary) объясняет разбор JSON и почему включение this возвращает null. – Andy

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

источник

2016-07-12 05:29:26

jQuery API не работает с JavaScript

ответ

Смежные вопросы