<div style="margin-top:20px;">
<button id="bt1" type="button">通過AJAX獲取隨機圖片</button> <span id="s1"></span>
</div>
<br />
<img id="img1"/>
<!-- jquery -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#bt1").click(function () {
getimg();
});
});
//===== AJAX獲圖片 ======
function getimg() {
var j = Math.ceil(Math.random() * 100);
$("#s1").text("正在獲取,請稍等....");
$.ajax({
type:'get',
url:'https://pixabay.com/api/?key=16322793-d4bcfe56af2f14816d6549dee&per_page=100',
dataType: "jsonp", //jsonp解決跨域
success: function (res) {
$("#s1").text("獲取成功,正在加載....");
console.log(res.hits[j].largeImageURL);
$("#img1").attr('src',res.hits[j].largeImageURL);
},
error:function(msg){
console.log(msg);
}
});
}
</script>
AJAX jsonp解決跨域模板
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.