jquery - 如何通过 $.get 使用图像加载器

Question

如何通过 $.get 使用图像加载器当我用 $.get 进行 ajax 调用时，有时需要几秒钟后效果才会发生。我怎样才能放置一个加载程序以便用户知道要等待直到数据加载完毕？

谢谢

编辑:

$.ajax({
    url: 'ajax.php',
    type: 'GET',
    dataType: 'json',
    data: 'shipping=' + sval,
    onBeforeSend: function()
    {
        $("table#cart tbody tr#line_top td ul#total li#shipping span").html("<img src='images/spinner.gif'>");
    },

    complete: function()
    {

    },

    success: function(out)
    {
        getShippingPrice = out.shippingPrice;
        getTotalPrice = out.cartTotal;
        $("table#cart tbody tr#line_top td ul#total li#shipping span").html(getShippingPrice);
        $("table#cart tbody tr#line_top td ul#total li#total span").html(getTotalPrice);
    }
});

编辑2:

<script type="text/javascript">

var getShippingPrice;
var getTotalPrice;

$(document).ready(function() {
    $(".shipmethod").change(function() {
        sVal = $(this).val();
        $.ajax({
            url: "ajax.php",
            type: "GET",
            dataType: "json",
            data: "shipping=" + sVal,

            beforeSend: function()
            {
                $('.ajaxSpinner').show();
            },

            complete: function()
            {
                $('.ajaxSpinner').hide();
            },

            success: function(out)
            {
                getShippingPrice = out.shippingPrice;
                getTotalPrice = out.cartTotal;
                $("table#cart tbody tr#line_top td ul#total li#shipping span").html(getShippingPrice);
                $("table#cart tbody tr#line_top td ul#total li#total span").html(getTotalPrice);
            }
        });
    });
});

</script>

Answer 1

你有两种可能性。

要么使用完整的 $.ajax()为您提供更多功能的方法:

$.ajax({
    url: '/foo.cgi',
    type: 'GET',
    beforeSend: function() {
        // TODO: show your spinner
        $('#ajaxSpinner').show();
    },
    complete: function() {
        // TODO: hide your spinner
        $('#ajaxSpinner').hide();
    },
    success: function(result) {
        // TODO: handle the results
    }
});

或使用$.ajaxSetup()为所有 ajax 请求提供全局设置 Hook 的方法:

$.ajaxSetup({
    beforeSend: function() {
        // TODO: show your spinner
        $('#ajaxSpinner').show();
    },
    complete: function() {
        // TODO: hide your spinner
        $('#ajaxSpinner').hide();
    }
});

然后做你的$.get()像往常一样:

$.get('/foo.cgi', function(result) {
    // TODO: handle the results
});