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

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: nn' + queryString); 
    return true; 
} 
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
    alert('status: ' + statusText + 'nnresponseText: n' + responseText + 
        'nnThe 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');
    }
});

更新

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

//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 + 'nnresponseText: n' + responseText + 
        'nnThe 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();
});