jQuery.post() 是否可以有两个成功回调函数？

Question

这可能吗？

一旦我的 jQuery.post 成功而不是只有一个成功回调，我就有两个。

例如

一旦我的表单成功发布了数据，一个名为“#msg”的空 div 将被赋予样式和内容并且一个名为“color-block”的空 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>");
     }
   });
});

使用 Promise 接口

$('#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

您可以在同一函数中更新您的第二个 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 */
}

Answer 2

两者都做：

$('#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 3

如果你使用 Promise 和 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
    });
});