Question

我知道这个问题已被问过千次，但我没有找到适合我的解决方案。

我有一个函数，在提交表单时调用。它检查一些表单字段并使用ajax将数据发送到php脚本。问题是，它可能需要几秒钟才能完成php并且我想淡入css动画，用户知道他应该等待。

如果表单字段中存在错误，则动画会正确淡入淡出。但是如果字段检查没问题，大多数jQuery会继续调用ajax而不完成动画。有时候动画会消失，有时它会在几毫秒后停止，有时在php脚本的回答出现之前没有任何反应。

如何告诉jquery等待ajax部件的执行，直到动画结束？

$(document).ready(function () {
    $('.daten_form').submit(function () {
        $("#loader-wrapper").fadeIn('normal');
        hasError = false;
        if ($('#delkfz').prop('checked',false)){
            if ($('#fin').val() == '') {
                $('#fin').addClass('error_class');
                hasError = true;
            }
        }
        if (hasError) {
            $("#loader-wrapper").fadeOut("normal");
            $('.error_box').show();
        } else {
            var einzelfz = false;
            var weiter = false;
            if ($('#einzelfz').val() == '1')
                einzelfz = true;
            if ($("#weiter").prop('checked') == true)
                weiter = true;
            var kvid = $('#kvid').val();
            $.ajax({
                type: 'POST',
                url: 'kvc_write.php',
                cache: false,
                data: $(".daten_form").serialize(),
                success: function (data) {
                    if (data == "error") {
                        $("#loader-wrapper").fadeOut("normal");
                        $('.success_box').hide();
                        $('.error_box').show();
                    } else if (data == "logout") {
                        var url = "index.php?ablauf=1";
                        $(location).attr('href',url);
                    } else if (data == "success" && (einzelfz || !weiter)) {
                        var url = "prepkvpdf.php?kvid="+kvid;
                        $(location).attr('href',url);
                    } else {
                        $("#loader-wrapper").fadeOut("normal");
                        $('.error_box').hide();
                        $('.success_box').show();
                    }
                }
            });
        }
        return false;
    });
});

Answer 1

使用Ajax的最佳方式：

        $.ajax({
            data: data,
            type: "GET", //or POST
            url: "YOU-KNOW.php",
            beforeSend: function(){
                //script runs when ajax send data
            },      
            success: function(data){
                //script runs when php finish the thing and tell me data.
            }
        });

如何等待jQuery动画？

1 个答案: