jQuery API funktioniert nicht mit JavaScript

Verwenden einer Mashape-API für zufällige Anführungszeichen, aber nichts geschieht auf Klick. Im Folgenden finden Sie JS und HTML. Stimmt etwas nicht mit dem JS-Code? Wenn ich auf den Knopf klicke, passiert nichts. Das Angebot erscheint nicht in der div. Vielen Dank!jQuery API funktioniert nicht mit 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>

Quelle

2016-07-12 Andy

irgendwelche Konsolenfehler? – madalinivascu

Ihr Codebeispiel ist nicht klar. Die js sollte in ein "Skript" -Tag eingebunden werden. Und Sie sollten es in eine Funktion auf Dokument bereit stellen, um an dom-Elemente binden zu können. –

Ihr Javascript wird ausgeführt, bevor die Schaltfläche in HTML vorhanden ist. Sie sollten versuchen, dies unterhalb des HTML-Ladevorgangs zu setzen, damit jquery an dieses Ereignis binden kann. –

Verhindern, dass das Standard-Click-Ereignis, das Parsen der Daten entfernen:

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

Quelle

2016-07-12 05:20:49 madalinivascu

Das funktionierte, ich wünschte nur, ich wüsste mehr über warum. Müssen die Parsing-Dokumente lesen. Danke vielmals. – Andy

Wenn jemand darüber stolpert, erklärt [diese Frage] (http://stackoverflow.com/questions/9111184/why-is-jjuery-parsejson-not-necessary) das JSON-Parsing und warum including this null zurückgibt. – Andy

jquery intelligent genug ist, json Antwort von selbst zu analysieren, so dass Sie Funktion Parsen entfernen müssen und alles sollte gut funktionieren :)

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

Quelle

2016-07-12 05:29:26

jQuery API funktioniert nicht mit JavaScript

Antwort

Verwandte Themen