更新

Question

我正在使用jquery表单（http://jquery.malsup.com/form/）在此页面上提交表单：http://licf.ronaldboadi.com/practice/test.html。以下是代码：

<script type="text/javascript">
// prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
        target:        '#submitform',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 

        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 

    // bind to the form's submit event 
    $('#camperapplicationForm').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options); 

        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    }); 
}); 

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
   // var formElement = jqForm[0]; 

    alert('About to submit: \n\n' + queryString); 
    return true; 
} 

// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
        '\n\nThe output div should have already been updated with the responseText.'); 
} 
</script>

我在处理数据时已经决定使用加载gif，一旦我准备好div，我就可以使用淡入淡出的动画。

这将涉及在我提交表单时向div添加一个简单的img元素（加载gif）。当我得到结果时，例如在$ .ajax调用的success方法中，我需要隐藏div，用我从服务器获得的结果替换img元素，然后添加淡入淡出动画。

但我一直想知道如何将以下代码实现到我当前的代码中...任何想法如何？

//Assuming you have a $.ajax request to submit the form:

//add the loading gif
$('#submitform').html('<img src="loading.gif" />');

//send your form data
$.ajax({
    url: "process.php",
    data: {
        param1: 1,
        param2: 2,
        param3: 3
    },
    success: function(data){
        //hide the div, assuming the process.php return simple html code to your page update the div content, then add the fade in animation
        $('#submitform').hide().html(data).fadeIn('slow');
    }
});

Answer 1

您可以这样做：

var siteUrl = 'http://localhost/';

//send your form data
$.ajax({
    url: "process.php",
    data: {
        param1: 1,
        param2: 2,
        param3: 3
    },
    beforeSend:function(){
        $('#main').append('<div class="loading"><img src="' + siteUrl + 'resources/imgs/ajax-loader.gif" alt="Loading..." /></div>');
    },
    success: function(data){
        $('.loading').remove();
        //hide the div, assuming the process.php return simple html code to your page update the div content, then add the fade in animation
        $('#submitform').hide().html(data).fadeIn('slow');
    }
});

更新

我的解决方案是您发布的jQuery ajax代码。对于根据其选项文档http://jquery.malsup.com/form/#options-object的malsup，您可以尝试：

//Show loading image before submit
beforeSubmit: function(arr, $form, options) { 
   $('#main').append('<div class="loading"><img src="' + siteUrl + 'resources/imgs/ajax-loader.gif" alt="Loading..." /></div>');
}
//Remove loading image after response
function showResponse(responseText, statusText, xhr, $form)  {
    $('.loading').remove();
    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
        '\n\nThe output div should have already been updated with the responseText.'); 
}

这就是想法......

Answer 2

您可以使用jQuery ajaxStart和ajaxStop事件来显示/隐藏您的加载指示器。无论何时进行ajax调用，jQuery都会自动调用它。

$("#loadingIndicator")
.bind('ajaxStart', function() {
   $(this).show();
})
.bind('ajaxStop', function() {
   $(this).hide();
});

在jQuery表单UI上处理数据和淡入动画时实现加载gif

2 个答案:

更新