来自 计算机教程 2019-08-17 17:08 的文章
当前位置: 美洲杯冠军竞猜 > 计算机教程 > 正文

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

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

篮球世界杯冠军竞猜,基于JQuery及AJAX实现名人名言随机生成器,jqueryajax

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

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

HTML:

<div class="container-fluid text-center"> 
 <h1> 
  Random Quote Generator 
 </h1> 
 <div class="well quote-area"> 




 </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。

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

http://www.bkjia.com/Javascript/1193581.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1193581.htmlTechArticle基于JQuery及AJAX实现名人名言随机生成器,jqueryajax 这是我刚接触AJAX的时候做的一个小应用,主要功能如下: 1.点击按钮可以随机生成一句名...

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

HTML:

<div class="container-fluid text-center"> 
 <h1> 
  Random Quote Generator 
 </h1> 
 <div class="well quote-area"> 




 </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:

本文由美洲杯冠军竞猜发布于计算机教程,转载请注明出处:基于JQuery及AJAX实现名人名言随机生成器

关键词: