Question

目前我有这个，效果很好 - 它是一个电子邮件注册列表，可以根据需要返回成功的响应或错误。

$.ajax({  
    type: "POST",  
    url: "mailing_list/mailing_list_add2.php",  
    data: dataString,  
    success: function(response) { 
        $('#emailform').html("<div id='display_block'></div>");
        $('#display_block')                      
        .hide()  
        .fadeIn(500, function() {  
            $('#display_block').html(response)
        });             
}  
}); 
return false; 
});

表单位于带有ID＆＃34; emailform＆＃34;的div中。和＃34; display_block＆＃34;是回应。我需要的是，响应会在很短的时间后自动消失，并且表单会重新开始。我已经尝试过一些东西，但没有任何有用的东西。

任何有关添加到上述代码中的内容的帮助都将不胜感激。

Answer 1

假设你的初始html是，

<div id="emailform">
   <form>
   ...
   </form>
</div>

你可以这样继续，

.ajax({       
type: "POST",       
url: "mailing_list/mailing_list_add2.php",       
data: dataString,       
success: function(response) {  

    var backupHtml = $('#emailform').html();        
    $('#emailform').html("<div id='display_block'></div>");            

    $('#display_block')                               
    .hide()       
    .html(response)    
    .fadeIn(500, function() {               
        $(this).fadeOut(5000,function(){
            $('#emailform').html(backupHtml);
        }); 
    });

}   
});

Answer 2

当淡入淡出时，display_block内部没有任何内容。它只是空的，我更改了代码：

$.ajax({  
    type: "POST",  
    url: "mailing_list/mailing_list_add2.php",  
    data: dataString,  
    success: function(response) { 

        var backedup = $('#emailform').html(); // Take a snapshot of whats inside the emailform
        $('#emailform').html("<div id='display_block'></div>");
        $('#display_block')                      
        .hide()
        .html(response) // New line!
        .fadeIn(500,function (){ // After we finsish the fadeIn 
            $('#emailform').hide().html(backedup).fadeIn(500); // Reset the old content and fade it in
        });           
}  
}); 
return false; 
});

我为你创建了一个JSFiddle http://jsfiddle.net/XHkWr/1/

Answer 3

要做而不是所有的mumbo jumbo。

$('#emailform').html("<div id='display_block'></div>");
$('#display_block').hide().html(response).stop().fadeIn(500);

Answer 4

我想说，这将是一个正确的解决方案：

$.ajax({
        url: 'mailing_list/mailing_list_add2.php',
        type: 'post',
        data: dataString,
        success: function(data, textStatus, jqXHR) {
            var $emailForm = $('#emailform').html();
            $('#emailform').html('<div id="display_block"></div>');

            $('#emailform').hide().html(data).fadeIn(500).delay(3000).fadeOut(500, function() {
                $('#emailform').html($emailForm);
            });
            return false;
        },
        error: function(jqXHR, textStatus, errorThrown) {
            var $emailForm = $('#emailform').html();
            $('#emailform').html('<div id="display_block"></div>');

            $('#display_block').hide().html(textStatus).fadeIn(500).delay(3000).fadeOut(500, function() {
                $('#emailform').html($emailForm);
            });
            return false;
        }
    });

结果在此处：http://jsfiddle.net/p9URt/2/

提交表格，通过ajax回复

4 个答案: