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的API獲得報價

結果：什麼都沒發生

其它：我如何添加代碼，使其獲得隨機報價，如果這有效？

Answer 1

我通過使用jsonp及其回調函數，在API網站的manual之後得到了它的工作。

而且我連上了漂亮：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的HTML，否則功能將因爲該元素將不再沒有進一步的工作存在。

Answer 2

更換

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

與

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