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


Posted in Javascript onFebruary 10, 2017

这是我刚接触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。

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

Javascript 相关文章推荐
js tab 选项卡
Apr 26 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
React.js入门学习第一篇
Mar 30 Javascript
js 作用域和变量详解
Feb 16 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 #Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 #Javascript
javascript自执行函数
Feb 10 #Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 #Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 #Javascript
JS验证不重复验证码
Feb 10 #Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 #Javascript
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
javascript 清除输入框中的数据
2009/04/13 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python文件和流(实例讲解)
2017/09/12 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
html Table 表头固定的实现
2019/01/22 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
实习自我鉴定
2013/12/15 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
高考备战决心书
2014/03/11 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL