基于JQuery及AJAX(JSONP)的名人名言随机生成器

2/10/2017来源:心得技巧人气:3674

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

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

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

HTML:

<div class="container-fluid text-center">
  <h1>
    Random Quote Generator
  </h1>
  <div class="well quote-area">
    <span class="quote">
    </span>
    <span class="author">
    </span>
  </div>
  <div class="btns">
    <button class="btn btn-default btn-lg" id="tweet">
      <i class="fa fa-twitter" aria-hidden="true">
      </i>
        Tweet
    </button>
    <button class="btn btn-default btn-lg" id="weibo">
      <i class="fa fa-weibo" aria-hidden="true">
      </i>
        Weibo
    </button>
    <button class="btn btn-default btn-lg" id="change">
      <i class="fa fa-exchange" aria-hidden="true">
      </i>
        Get Quote
    </button>
  </div>
</div>
<footer class="text-center">
  Designed by
  <a href="http://blog.csdn.net/alenhhy" target="_blank">
    Alen Hu
  </a>
</footer>

JQuery:

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