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

Question

这可能吗？

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

例如

一旦我的表单成功发布数据，一个名为“#msg”的空 div 被赋予样式和内容AND 一个名为“colour-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 接口(interface)

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

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