是否有可能通過jQuery.post（）有兩個成功的回調函數？

Question

這可能嗎？

一旦我的jQuery.post成功，而不是隻有一個成功回調我有兩個。

例如

一旦我的形式成功地發佈了一個名爲「#msg」空div給出的風格和內容和給出一個所謂的「色塊」空div樣式的數據。

代碼到目前爲止

$('#form1').submit(function(e) 
{ 
e.preventDefault(); 
$.ajax({ 
    type: 'POST', 
    url: 'indextest1.php', 
    data: $("#form1").serialize(), 
    success: function(response) { 
$('#msg').html("<div style='border: 1px solid black; padding:15px 50px 15px 20px; width:437px; border-radius: 8px; background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center;'>Now sit back and relax.....</div>"); 

    } 
    }); 
}); 

任何幫助或指針將不勝感激。

我試過的東西，並沒有工作！

增加另一個回調

$('#form1').submit(function(e) 
{ 
e.preventDefault(); 
$.ajax({ 
    type: 'POST', 
    url: 'indextest1.php', 
    data: $("#form1").serialize(), 
    success: function(response) { 


$('#msg').html("<div style='border: 1px solid black; padding:15px 50px 15px 20px; width:437px; border-radius: 8px; background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center;'>Now sit back and relax</div>"); 

$("#colour-block").html("<div style='border: 1px solid black; padding:15px 50px 15px 20px; width:437px; border-radius: 8px; background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center;'>bla bla</div>"); 
    } 
    }); 
}); 

使用無極接口

$('#form1').submit(function(e) 
{ 
e.preventDefault(); 
    var ajax = $.ajax({ 
     type : 'POST', 
     url : 'indextest1.php', 
     data : $("#form1").serialize() 
    }).done(function(response) { 

$("#msg").html('<div style='border: 1px solid black; padding:15px 50px 15px 20px; width:437px; border-radius: 8px; background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center;'>Now sit back and relax while we go to work on your behalf, we\'ll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on 078675675446 or isaaclayne@southwestcarfinder.co.uk</div>'); 

$("#colour-block").html('<div style='border: 1px solid black; padding:15px 50px 15px 20px; width:437px; border-radius: 8px; background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center;'>Now sit back and relax while we go to work on your behalf, we\'ll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on 078675675446 or isaaclayne@southwestcarfinder.co.uk</div>'); 
    }); 
    }); 
}); 

Answer 1

就一舉兩得：

$('#form1').submit(function(e) 
{ 
e.preventDefault(); 
$.ajax({ 
    type: 'POST', 
    url: 'indextest1.php', 
    data: $("#form1").serialize(), 
    success: function(response) { 
     $('#msg').html("<div style='border: 1px solid black; padding:15px 50px 15px 20px; width:437px; border-radius: 8px; background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center;'>Now sit back and relax.....</div>"); 
     $('.colour-block').css({/*css styles here*/}); 
    } 
    }); 
}); 

Answer 2

如果您使用的承諾和done，fail和always，你可以添加你想要儘可能多的，你可以盡你所能地做到每個人都可以做到

$('#form1').submit(function(e) { 
    e.preventDefault(); 
    var ajax = $.ajax({ 
     type : 'POST', 
     url : 'indextest1.php', 
     data : $("#form1").serialize() 
    }).done(function(response) { 
      $('#msg').html("<div style='border: 1px solid black; padding:15px 50px 15px 20px; width:437px; border-radius: 8px; background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center;'>Now sit back and relax.....</div>"); 
      $('#msg2').text('something else'); 
      $('#msg3').css('color', 'red'); 
    }).done(function() { 
      $('.class').text('another callback') 
      $('.class').append('<p>Not sure why you would need it ?</p>') 
    }); 

    ajax.done(function() { 
     $('.class2').txt('This is the same') 
     $('.class3').txt('you can store it in a variable') 
    }); 

    ajax.fail(function() { 
     // this fires if something goes wrong 
    }); 

    ajax.always(function() { 
     // this always fires, both on success and failure 
    }); 
}); 

Answer 3

您可以更新相同功能的第二個div。

您也可以嘗試外部化你的CSS，並給予你內心的div一些ID（或類，如你所願），以他們的風格：

success: function(response) { 
    //Create the inner div with the appropriate id, for css styling 
    var msg_inner = $('<div>',{id:'msg-inner', html:'Now sit back and relax...'}); 
    //Same thing for your colour-block div 
    var colour_block_inner = $('<div>',{id:'colour_block-inner', html:'Blah'});  

    $('#msg').append(msg_inner); 
    $('#colour-inner').append(colour_block_inner);  
} 

用下面的CSS外化：

#msg-inner{ 
    border: 1px solid black; 
    padding:15px 50px 15px 20px; 
    width:437px; 
    border-radius: 8px; 
    background:#D3EDD3 url(img/accepted_48.png) no-repeat 450px center; 
} 

#colour-block-inner{ 
    /* Your future style here */ 
}