- random quote
<div class="main">
<h1>Random Quote</h1>
<div class="wrap">
<div class="content">
<div class="quote random-color">"說什么呢"</div>
<div class="author random-color">——張大俠</div>
<div class="btn-wrap">
<button type="button" class="twitter link-icon random-color"><img src="img/twitter.png" alt=twitter""></button>
<button type="button" class="tumblr link-icon random-color"><img src="img/tumblr.png" alt="tumblr"></button>
<button type="button" class="get-random random-color"><span class="new-quote">New quote</span></button>
</div>
</div>
</div>
</div>
js部分
var ajaxRequest ;
function createRequest(){
var request
try {
request = new XMLHttpRequest();
} catch(tryMS) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch(otherMS) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
console.log("失敗");
return null;
}
}
}
return request;
}
function stateChange(request) {
if (ajaxRequest.readyState === 4) {
if (ajaxRequest.status === 200) {
var r = JSON.parse(ajaxRequest.responseText);
var quote = r.quote;
var author = r.author;
$(".disp-text").html = quote;
}
else {
alert("錯誤");
}
}
}
function stateChange() {
if (ajaxRequest.readyState === 4) {
if (ajaxRequest.status === 200) {
var r = JSON.parse(ajaxRequest.responseText);
var quote = r.quote;
var author = r.author;
$("p").html(quote);
console.log(quote);
}
else {
alert("錯誤");
}
}
}
$(document).ready(function(){
$("#get-info").on("click", function(){
ajaxRequest = new XMLHttpRequest();
var url = "https://andruxnet-random-famous-quotes.p.mashape.com/cat=";
ajaxRequest.open("GET", url, true);
ajaxRequest.setRequestHeader( "X-Mashape-Key", "OivH71yd3tmshl9YKzFH7BTzBVRQp1RaKLajsnafgL2aPsfP9V");
ajaxRequest.setRequestHeader("Accept", "application/json");
ajaxRequest.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded");
ajaxRequest.onreadystatechange = stateChange;
ajaxRequest.send(null);
});
});
