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