在ajaxForm中显示等待div直到服务器响应

时间:2014-09-26 13:30:53

标签: javascript php jquery mysql

<script type="text/javascript">
$(document).ready(function (event) {
    $('#reset_btn').click(function () {

        $("#Sender").val("");
        $("#message").val("")
    });
    $('#form1').ajaxForm({
        dataType: 'json',
        success: function (response) {
            var user_phone = $('<?php echo $type;?>[name=Sender]').val();
            var user_message = $('textarea[name=message]').val();
            var proceed = true;
            if (user_phone == "") {
                $('<?php echo $type;?>[name=Sender]').addClass('inp-form-error');
                proceed = false;
            }
            if (user_message == "") {
                $('textarea[name=message]').addClass('form-textarea-red');
                proceed = false;
            }
            if (proceed) {
                $("#wait").show();

                if (response.type == 'error') {
                    output = '<div id="msg_1" class="error_msg_003"><div id="image" class="msg_003_image"></div>' + response.text + '</div>'
                } else if (response.type == 'warning') {
                    output = '<div id="msg_1" class="warning_msg_003"><div id="image" class="msg_003_image"></div>' + response.text + '</div>'
                } else {
                    output = '<div id="msg_1" class="success_msg_003"><div id="image" class="msg_003_image"></div>' + response.text + '</div>'
                    // output = '<div class="alert alert-success"><a href = "#" class = "close">&times;</a>'+'<strong>'+response.title+'</strong>'+response.text +'</div>'
                    //reset values in all input fields
                    $('#contact_form input').val('');
                    $('#contact_form textarea').val('');

                    var credit = $.ajax({
                        url: "balance.php",
                        async: false
                    });
                    $("#credit").html(credit.responseText);

                }
                $("#result").hide().html(output).show();
            }
        }
    });
    //reset previously set border colors and hide all message on .keyup()
    $("#contact_form input, #contact_form textarea").keyup(function () {
        $('textarea[name=Recepient]').removeClass('inp-form-error');
        $('<?php echo $type;?>[name=Sender]').removeClass('inp-form-error');
        $('textarea[name=message]').removeClass('form-textarea-red');


        $("#result").slideUp();
    });

});
</script>

我试图显示$("#wait").show();,直到服务器响应返回。我很困惑在哪里放“等待”div。它应显示等待div直到服务器响应。

服务器脚本上有5秒的睡眠,以检查等待div是否正常工作。

2 个答案:

答案 0 :(得分:0)

beforeSubmit事件选项中显示。

$('#form1').ajaxForm({
        dataType: 'json',
        beforeSubmit: function(){
            $("#wait").show();
        },
        ...

然后将其隐藏在成功函数中(在加载结束时调用)。

success: function (response) {
    $("#wait").hide();
    ...

答案 1 :(得分:0)

把这个$(&#34;#wait&#34;)。show()放在ajax请求的beforesubmit事件中,$(&#34;#wait&#34;)。hide()在ajax成功事件中。< / p>