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
});