html 名人名言源代码,基于JQuery及AJAX实现名人名言随机生成器_咋地 _前端开发者...
这是我刚接触AJAX的时候做的一个小应用,主要功能如下:
1.点击按钮可以随机生成一句名人名言及其作者名字,如果没有作者名字,则显示“Unknown”。
2.点击按钮可以把名人名言分享到推特或者微博。
Random Quote Generator
Tweet
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实现名人名言随机生成器_咋地 _前端开发者...相关推荐
- ajax 随机,基于JQuery及AJAX实现名人名言随机生成器
基于JQuery及AJAX实现名人名言随机生成器 发布于 2017-05-05 06:56:38 | 137 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQu ...
- 基于jquery的ajax聊天室系统,基于jQuery的Ajax聊天室应用毕业设计(含外文翻译)...
基于jQuery的Ajax聊天室应用毕业设计(含外文翻译) 毕业设计(论文) I 基于基于 jQuery 的的 Ajax 聊天室应用聊天室应用 摘摘 要要 随着网络的逐渐普及,以及网络技术的不断发展, ...
- ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论
基于jquery实现ajax无刷新评论 发布于 2017-03-31 11:26:07 | 75 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQuery是一个 ...
- 源码来袭!!!基于jquery的ajax分页插件(demo+源码)
前几天打开自己的博客园主页,发现自己的园龄竟然有4年之久了,没记错的话刚接触编程就知道了博客园,也就是说我入坑4年了?时光啊~.刚学习编程的时候最喜欢的就是来园子里听大神们吹牛逼,看着他们装逼就觉得很 ...
- ajax前台转换json数据库,基于jQuery的ajax功能实现web service的json转化
不过这篇文章的题目我真不知道该怎么起,如果你因为这个差劲的题目错过这个东西,那真的很可惜. 我在做这个东西之前参考了不少文章: 第一步需要做的是如何在Server端把一个datatable转坏为自己需 ...
- 基于jQuery的AJAX和JSON实现纯html数据模板
通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板: <table ...
- 基于jQuery的ajax系列之用FormData实现页面无刷新上传
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...
- java json html模板,基于jQuery的AJAX和JSON实现纯html数据模板(转载)
来自:http://www.cnblogs.com/linzheng/archive/2010/10/14/1851799.html 通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的 ...
- ajax校验用户名可用吗,基于jQuery实现Ajax验证用户名是否可用实例
本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码,供大家参考,具体内容如下 HTML Insert title here //页面加载完成后 $(function() ...
最新文章
- matlab把cell矩阵转换成能处理的数据
- c语言funcode空格消失的函数,01北科大暑期计算机实践FunCode游戏设计+C++课程设计 - 海底世界 - 图文...
- ASP.NET - 截取固定长度字符串显示在页面,多余部分显示为省略号
- laravel + Vue 前后端分离 之 项目配置- 生产环境部署
- C++sort函数使用总结
- mysql去掉重复数据只保留一条,以及取分组后的一条数据
- Redis Cluster集群的配置
- YII composer全局安装
- 用微PE安装KALI LINUX到U盘,【U盘安装kali】U盘+kali+pe三合一教程!装机,存储(自己用来做U盘使用的空间)...
- Maven打包:Error injecting:xxxxxxx / java.lang.NoClassDefFoundError: xxxxxx
- 创客使用Fusion 360 - 制作模型
- day09 文件操作相关
- prometheus 告警配置以及配置项解释
- 【数据应用案例】异动分析——指标逻辑树
- 2010上半年网络规划设计师上午试卷、标准答案及分析Ⅱ
- 按照ID降序排列方法
- mac安装linux时触控板不能用,macbookpro上装Deepin 20.2后wifi和触摸板不可用的解决
- rtx3060性能相当于什么水平 rtx3060参数
- Java8 JDK8
- Guessing Camels
热门文章
- 《当程序员的那些狗日日子》一
- 值传递,指针传递,引用传递的区别
- 数字图像处理王慧琴课后答案_清华大学出版社-图书详情-《数字图像处理(第3版)》...
- Qt 工程下使用 cmake MinGW OpenCV 4.1.1(涵盖 MinGW32 与 MinGW64)
- 如何提升产品经理的综合素质?
- 联想拯救者Y7000P触摸板无法使用
- 使用 Marvelous Designer 为DAZ Studio 的 Genesis8 Female做衣服 1
- 花三分钟,一起了解一下消费全返模式是怎么样的?消费者又消费又赚钱
- 华三模拟器之OSPF实验
- 画出漂亮的神经网络图,神经网络可视化工具大汇总