当先锋百科网

首页 1 2 3 4 5 6 7

jQuery AJAX 图片加载

$(document).ready(function() {
//点击按钮时,发送ajax请求
$('#btn-load-img').click(function() {
//获取图片地址
var imgUrl = $('#img-url').val();
//发送ajax请求
$.ajax({
type: 'GET',
url: imgUrl,
beforeSend: function() {
//显示loading提示
$('#loading').show();
},
success: function() {
//隐藏loading提示
$('#loading').hide();
//将图片显示在页面上
$('#img-container').html('');
},
error: function() {
//显示错误提示
$('#error').show();
}
});
});
});

通过以上的代码,可以实现在页面上加载图片。首先,需要在页面中添加一个输入框,用于获取图片的URL。同时,还需要在页面上添加一个按钮,用于触发ajax请求。

点击按钮时,会发送ajax请求。请求的URL就是从输入框中获取的图片地址。发送请求时,还可以添加一些回调函数,如beforeSend、success、error。beforeSend回调函数可以在ajax请求发送之前执行一些操作,例如显示loading提示。success回调函数则在ajax请求成功时执行。如果请求失败,则会执行error回调函数,此时可以显示一些错误提示。

最后,在ajax请求成功后,会将图片显示在页面上。这里使用了jQuery的html函数,用于向页面中添加HTML代码。具体而言,使用了img标签来显示图片,其中的src属性值就是ajax请求获取到的图片URL。