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

EDIT2：

<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请求提供全局设置挂钩：

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

如何使用带有$ .get的图像加载器

1 个答案: