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。