Ärger html mit JSON-Daten von API Aktualisierung JQuery mit

Question

Ich versuche, eine zufälliges Zitat Maschine zu bauen, mit einem diesem api: https://market.mashape.com/andruxnet/random-famous-quotes

hier ist mein 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); 

Ich versuche, die JSON zu erhalten um das DOM bei jedem Klick zu aktualisieren.

Answer 1

Ihre Funktion benötigt zwei Parameter, ist jedoch an ein Element gebunden, das diese Parameter nicht bereitstellt, oder zumindest nicht die Informationen, nach denen Sie suchen.

Was Sie eigentlich wollen, ist für Ihren onclick den Ajax aufrufen, und füllen Sie den inneren HTML mit der Antwort.

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

Das Problem ist, dass Sie zunächst machen Ihre Anfrage sind, und dann das Auslösen eines Click-Ereignis den Text zu den bereits abgerufenen Werte zu ändern. Sie müssen Ihren Code neu strukturieren, um die Anforderung per Klick zu senden, und den Text dann aktualisieren, wenn Sie Ihre Antwort erhalten haben. Dies wird am einfachsten erreicht, wenn Sie eine Callback-Funktion an Ihre Anfrage übergeben.

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); 
    }); 
    }); 

});