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

 更新时间:2017年02月10日 10:41:40   作者:alenhhy  
这篇文章主要为大家详细介绍了基于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

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

相关文章

  • 取选中的radio的值

    取选中的radio的值

    取选中的radio的值
    2010-01-01
  • jQuery实现简单弹幕效果

    jQuery实现简单弹幕效果

    这篇文章主要为大家详细介绍了jQuery实现简单弹幕效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • 利用jquery实现下拉框的禁用与启用

    利用jquery实现下拉框的禁用与启用

    本文主要介绍了jquery实现下拉框的禁用与启用的具体代码。代码清晰,容易理解。有需要的朋友可以参考下,希望会对大家有所帮助
    2016-12-12
  • jQuery实现表格的增、删、改操作示例

    jQuery实现表格的增、删、改操作示例

    这篇文章主要介绍了jQuery实现表格的增、删、改操作,涉及基于jQuery的事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • 使用JQuery实现的分页插件分享

    使用JQuery实现的分页插件分享

    本文给大家总结了几种使用jQuery实现的分页插件,效果非常不错,有需要的小伙伴可以参考下。
    2015-11-11
  • jQuery增加自定义函数的方法

    jQuery增加自定义函数的方法

    这篇文章主要介绍了jQuery增加自定义函数的方法,通过简单的样式添加为例分析了jquery增加自定义函数的实现技巧,非常简单实用,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • EasyUI中在表单提交之前进行验证

    EasyUI中在表单提交之前进行验证

    这篇文章主要介绍了EasyUI中在表单提交之前进行验证的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • 前端必备神器 Snap.svg 弹动效果

    前端必备神器 Snap.svg 弹动效果

    SVG(可缩放矢量图形)是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。
    2014-11-11
  • jQuery对下拉框,单选框,多选框的操作

    jQuery对下拉框,单选框,多选框的操作

    这篇文章主要介绍了jQuery对下拉框,单选框,多选框的操作需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 用JQuery模仿淘宝的图片放大镜显示效果

    用JQuery模仿淘宝的图片放大镜显示效果

    相信大部分人都上过淘宝网吧,里面有个这个效果,当鼠标移动到小图上面,显示大图。
    2011-09-09

最新评论