Question

这可能吗？

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

例如

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

如果您使用承诺和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 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

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

是否可以使用jQuery.post（）获得两个成功的回调函数？

3 个答案: