一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2017-03-27 编辑:简简单单 来源:一聚教程网

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

热门栏目