基于JQuery及AJAX实现名人名言随机生成器

这是我刚接触AJAX的时候做的一个小应用，主要功能如下：

1.点击按钮可以随机生成一句名人名言及其作者名字，如果没有作者名字，则显示“Unknown”。 2.点击按钮可以把名人名言分享到推特或者微博。

HTML:

<div class="container-fluid text-center"> 
 <h1> 
 Random Quote Generator 
 </h1> 
 <div class="well quote-area"> 
 <span class="quote"> 
 </span> 
 <span class="author"> 
 </span> 
 </div> 
 <div class="btns"> 
 <button class="btn btn-default btn-lg" id="tweet"> 
 <i class="fa fa-twitter" aria-hidden="true"> 
 </i> 
 Tweet 
 </button> 
 <button class="btn btn-default btn-lg" id="weibo"> 
 <i class="fa fa-weibo" aria-hidden="true"> 
 </i> 
 Weibo 
 </button> 
 <button class="btn btn-default btn-lg" id="change"> 
 <i class="fa fa-exchange" aria-hidden="true"> 
 </i> 
 Get Quote 
 </button> 
 </div> 
</div> 
<footer class="text-center"> 
 Designed by 
 <a href="http://blog.csdn.net/alenhhy" rel="external nofollow" target="_blank"> 
 Alen Hu 
 </a> 
</footer> 

JQuery:

$(document).ready(function() { 
 var quote, author; 
 
 function getNewQuote() { 
 $.ajax({ 
 type: "get", 
 url: "http://api.forismatic.com/api/1.0/", 
 jsonp: 'jsonp', 
 dataType: 'jsonp', 
 data: { 
 method: 'getQuote', 
 lang: 'en', 
 format: 'jsonp' 
 }, 
 success: function(response) { 
 quote = response.quoteText; 
 author = response.quoteAuthor; 
 $('.quote').text('\"' + quote + '\"'); 
 if (author) { 
 $('.author').text('by ' + author); 
 } else { 
 $('.author').text('by Unknown'); 
 } 
 } 
 }); 
 } 
 
 getNewQuote(); 
 
 $('#change').on('click', 
 function(event) { 
 event.preventDefault(); 
 getNewQuote(); 
 }); 
 
 $('#tweet').on('click', 
 function(event) { 
 event.preventDefault(); 
 window.open('http://twitter.com/intent/tweet?text=' + encodeURIComponent(quote + ' by ' + author)); 
 }); 
 
 $('#weibo').on('click', 
 function(event) { 
 event.preventDefault(); 
 window.open('http://v.t.sina.com.cn/share/share.php?title=' + encodeURIComponent(quote + ' by ' + author)); 
 }) 
}); 

*forismatic的API可以获取名人名言，但是只有英语和俄语版本的...不过中文类似的API也有很多的啦，实现原理都差不多。

DEMO在这儿，欢迎来FORK:Random Quote Generator。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。