是否有可能通过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 */ 
}