jquery ajax请求的五个步骤|基于JQuery及AJAX实现名人名言随机生成器

更新时间:2021-06-17    来源:jquery    手机版     字体:

【www.bbyears.com--jquery】

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

本文来源:http://www.bbyears.com/wangyezhizuo/124262.html