Ajax вызов не отвечает

Question

var quoteUrl='http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json'; 
 
$(document).ready(function() { 
 
    var $loader = $("#btn"), 
 
     $insertion=$("#insertionPoint"); 
 
    $loader.click(function() { 
 
    $.ajax({ 
 
     url:quoteUrl , 
 
     dataType: 'json', 
 
     success:function(data){ 
 
     var quote=data.quoteText; 
 
     $insertion.replaceWith('<p>'+quote+'</p>'); 
 
     } 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Random quote Machine</h1> 
 

 
<div id="insertionPoint"> 
 
    <p>Quotes come here</p> 
 
</div> 
 
<button id="btn">Next Quote</button>

Задача: Чтобы получить цитату из forimastic.com-х Апи

Результат: Ничего не Happening

Дополнительно: Как я могу добавить коды, чтобы сделать это получить случайные кавычки, если это работает?

Answer 1

Я получил его для работы с помощью jsonp и его обратного вызова, следуя manual с веб-сайта API.

И я даже сделал это похорошела: D

var quoteUrl='http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=parseQuote&lang=en'; 
 
$(document).ready(function() { 
 
    $("#btn").click(function() { 
 
    $.ajax({ 
 
     url:quoteUrl , 
 
     crossDomain: true, 
 
     jsonpCallback: 'parseQuote', 
 
     dataType: 'jsonp', 
 
     success:function(data){ 
 
     $("#insertionPoint>#quote").html(data.quoteText); 
 
     $("#insertionPoint>#author").html(data.quoteAuthor); 
 
     } 
 
    }); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<h1>Random quote Machine</h1> 
 

 
<blockquote id="insertionPoint"> 
 
    <span id="quote">Quotes come here</span> 
 
    <footer id="author">Author comes here</footer> 
 
</blockquote> 
 
<button class="btn btn-info" id="btn">Next Quote</button>

Вы должны изменить #insertionPoint «s HTML вместо того, чтобы заменить его, в противном случае функция будет не никакой дальнейшей работы, так как этот элемент, больше не будет существовать.

Answer 2

Заменить

$insertion.replaceWith('<p>'+quote+'</p>'); 

с

$insertion.html('<p>' + quote + '</p>');