2016-12-25 101 views
0

Ajax调用不是响应

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获得报价

结果:什么都没发生

其它:我如何添加代码,使其获得随机报价,如果这有效?

+0

尝试'$($装载机).click' – Phiter

+0

$($装载机)。点击(函数(){......}) ;没有不工作 – Nibesh

回答

2

我通过使用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,否则功能将因为该元素将不再没有进一步的工作存在。

1

更换

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

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

json调用不能正常工作,跨域问题,也许只能在堆栈溢出。 – Phiter