<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解决跨域模板
猜你喜欢
转载自blog.csdn.net/qq_41912398/article/details/106132752
今日推荐
周排行