Realization of random generator of famous sayings based on JQuery and AJAX

  • 2021-07-18 07:08:57
  • OfStack

This is a small application that I made when I first came into contact with AJAX. The main functions are as follows:

1. Click the button to randomly generate a famous saying and its author's name. If there is no author's name, "Unknown" will be displayed.
2. Click the button to share famous sayings on Twitter or Weibo.

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's API can get famous sayings, but only English and Russian versions... However, there are many similar API in Chinese, and the implementation principles are similar.

DEMO is here. Welcome to FORK: Random Quote Generator.


Related articles: