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

作者:袖梨 2022-06-25

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

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

HTML:

代码如下 复制代码

Random Quote Generator

Tweet

Weibo

Get Quote

Designed by

Alen Hu

JQuery:

代码如下 复制代码

$(document).ready(function() {

varquote, author;

functiongetNewQuote() {

$.ajax({

type:"get",

url:"http://api.fo*r*isma*tic.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://tw**itter.c*om/intent/tweet?text='+ encodeURIComponent(quote +' by '+ author));

});

$('#weibo').on('click',

function(event) {

event.preventDefault();

window.open('http://v.*t.s*ina.*com.cn/share/share.php?title='+ encodeURIComponent(quote +' by '+ author));

})

});

*forismatic的API可以获取名人名言,但是只有英语和俄语版本的...不过中文类似的API也有很多的啦,实现原理都差不多。

DEMO在这儿,欢迎来FORK:Random Quote Generator。

相关文章

精彩推荐