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

1.点击按钮可以随机生成一句名人名言及其作者名字,如果没有作者名字,则显示“Unknown”。

2.点击按钮可以把名人名言分享到推特或者微博。

Random Quote Generator

Tweet

Weibo

Get Quote

Designed by

Alen Hu

$(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。

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

html 名人名言源代码,基于JQuery及AJAX实现名人名言随机生成器_咋地 _前端开发者...相关推荐

  1. ajax 随机,基于JQuery及AJAX实现名人名言随机生成器

    基于JQuery及AJAX实现名人名言随机生成器 发布于 2017-05-05 06:56:38 | 137 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQu ...

  2. 基于jquery的ajax聊天室系统,基于jQuery的Ajax聊天室应用毕业设计(含外文翻译)...

    基于jQuery的Ajax聊天室应用毕业设计(含外文翻译) 毕业设计(论文) I 基于基于 jQuery 的的 Ajax 聊天室应用聊天室应用 摘摘 要要 随着网络的逐渐普及,以及网络技术的不断发展, ...

  3. ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论

    基于jquery实现ajax无刷新评论 发布于 2017-03-31 11:26:07 | 75 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQuery是一个 ...

  4. 源码来袭!!!基于jquery的ajax分页插件(demo+源码)

    前几天打开自己的博客园主页,发现自己的园龄竟然有4年之久了,没记错的话刚接触编程就知道了博客园,也就是说我入坑4年了?时光啊~.刚学习编程的时候最喜欢的就是来园子里听大神们吹牛逼,看着他们装逼就觉得很 ...

  5. ajax前台转换json数据库,基于jQuery的ajax功能实现web service的json转化

    不过这篇文章的题目我真不知道该怎么起,如果你因为这个差劲的题目错过这个东西,那真的很可惜. 我在做这个东西之前参考了不少文章: 第一步需要做的是如何在Server端把一个datatable转坏为自己需 ...

  6. 基于jQuery的AJAX和JSON实现纯html数据模板

    通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板: <table ...

  7. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  8. java json html模板,基于jQuery的AJAX和JSON实现纯html数据模板(转载)

    来自:http://www.cnblogs.com/linzheng/archive/2010/10/14/1851799.html 通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的 ...

  9. ajax校验用户名可用吗,基于jQuery实现Ajax验证用户名是否可用实例

    本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码,供大家参考,具体内容如下 HTML Insert title here //页面加载完成后 $(function() ...

最新文章

  1. matlab把cell矩阵转换成能处理的数据
  2. c语言funcode空格消失的函数,01北科大暑期计算机实践FunCode游戏设计+C++课程设计 - 海底世界 - 图文...
  3. ASP.NET - 截取固定长度字符串显示在页面,多余部分显示为省略号
  4. laravel + Vue 前后端分离 之 项目配置- 生产环境部署
  5. C++sort函数使用总结
  6. mysql去掉重复数据只保留一条,以及取分组后的一条数据
  7. Redis Cluster集群的配置
  8. YII composer全局安装
  9. 用微PE安装KALI LINUX到U盘,【U盘安装kali】U盘+kali+pe三合一教程!装机,存储(自己用来做U盘使用的空间)...
  10. Maven打包:Error injecting:xxxxxxx / java.lang.NoClassDefFoundError: xxxxxx
  11. 创客使用Fusion 360 - 制作模型
  12. day09 文件操作相关
  13. prometheus 告警配置以及配置项解释
  14. 【数据应用案例】异动分析——指标逻辑树
  15. 2010上半年网络规划设计师上午试卷、标准答案及分析Ⅱ
  16. 按照ID降序排列方法
  17. mac安装linux时触控板不能用,macbookpro上装Deepin 20.2后wifi和触摸板不可用的解决
  18. rtx3060性能相当于什么水平 rtx3060参数
  19. Java8 JDK8
  20. Guessing Camels

热门文章

  1. 《当程序员的那些狗日日子》一
  2. 值传递,指针传递,引用传递的区别
  3. 数字图像处理王慧琴课后答案_清华大学出版社-图书详情-《数字图像处理(第3版)》...
  4. Qt 工程下使用 cmake MinGW OpenCV 4.1.1(涵盖 MinGW32 与 MinGW64)
  5. 如何提升产品经理的综合素质?
  6. 联想拯救者Y7000P触摸板无法使用
  7. 使用 Marvelous Designer 为DAZ Studio 的 Genesis8 Female做衣服 1
  8. 花三分钟,一起了解一下消费全返模式是怎么样的?消费者又消费又赚钱
  9. 华三模拟器之OSPF实验
  10. 画出漂亮的神经网络图,神经网络可视化工具大汇总