Javascript 是否可以使用jQuery.post()实现两个成功回调函数?

Javascript 是否可以使用jQuery.post()实现两个成功回调函数?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这可能吗? 一旦jQuery.post成功,而不是只有一个成功回调,我就有两个成功回调 比如说 一旦我的表单成功发布了数据,一个名为“#msg”的空div将被赋予样式和内容,一个名为“颜色块”的空div将被赋予样式 到目前为止的代码 $('#form1').submit(function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest1.php', data: $("#form1").

这可能吗?

一旦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')。提交(函数(e)
{
e、 预防默认值();
$.ajax({
键入:“POST”,
url:'indextest1.php',
数据:$(“#form1”).serialize(),
成功:功能(响应){
$('#msg').html(“现在坐下来放松一下…”);
}
});
});
任何帮助或指点都将不胜感激

我尝试过但没有成功的事情

添加另一个回调

$('#form1')。提交(函数(e)
{
e、 预防默认值();
$.ajax({
键入:“POST”,
url:'indextest1.php',
数据:$(“#form1”).serialize(),
成功:功能(响应){
$('#msg').html(“现在坐下来放松一下”);
$(“#色块”).html(“bla bla”);
}
});
});
使用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>');
     });
   });
});
$('#form1')。提交(函数(e)
{
e、 预防默认值();
var ajax=$.ajax({
键入:“POST”,
url:'indextest1.php',
数据:$(“#form1”).serialize()
}).完成(功能(响应){
$(“#msg”).html('现在坐下来休息一下,我们代表您去工作,我们将向您提供最新的结果信息,如果您有任何问题,我们欢迎您致电078675675446或发送电子邮件isaaclayne@southwestcarfinder.co.uk');
$(“#color block”).html('现在坐下来休息一下,我们代表您去工作,我们将向您提供最新的结果信息,如果您有任何问题,我们欢迎您致电078675675446或发送电子邮件isaaclayne@southwestcarfinder.co.uk');
});
});
});

如果您使用承诺和
完成
失败
始终
,您可以添加任意数量的内容,也可以在每个内容中添加任意数量的内容

$('#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
    });
});
$('#form1')。提交(函数(e){
e、 预防默认值();
var ajax=$.ajax({
键入:“POST”,
url:'indextest1.php',
数据:$(“#form1”).serialize()
}).完成(功能(响应){
$('#msg').html(“现在坐下来放松一下…”);
$('#msg2').text('something other');
$('#msg3').css('color','red');
}).done(函数(){
$('.class').text('另一个回调')
$(“.class”).append(“不确定为什么需要它?

”) }); 完成(函数(){ $('.class2').txt('这是相同的') $('.class3').txt('可以将其存储在变量中') }); fail(函数(){ //如果出了什么问题,就会触发 }); always(function()){ //无论是成功还是失败,这都会激发灵感 }); });
如果您使用承诺和
完成
失败
始终
,您可以添加任意数量的内容,也可以在每个内容中添加任意数量的内容

$('#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
    });
});
$('#form1')。提交(函数(e){
e、 预防默认值();
var ajax=$.ajax({
键入:“POST”,
url:'indextest1.php',
数据:$(“#form1”).serialize()
}).完成(功能(响应){
$('#msg').html(“现在坐下来放松一下…”);
$('#msg2').text('something other');
$('#msg3').css('color','red');
}).done(函数(){
$('.class').text('另一个回调')
$(“.class”).append(“不确定为什么需要它?

”) }); 完成(函数(){ $('.class2').txt('这是相同的') $('.class3').txt('可以将其存储在变量中') }); fail(函数(){ //如果出了什么问题,就会触发 }); always(function()){ //无论是成功还是失败,这都会激发灵感 }); });
两者都要做:

$('#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*/});
     }
   });
});
$('#form1')。提交(函数(e)
{
e、 预防默认值();
$.ajax({
键入:“POST”,
url:'indextest1.php',
数据:$(“#form1”).serialize(),
成功:功能(响应){
$('#msg').html(“现在坐下来放松一下…”);
$('.color block').css({/*此处为css样式*/});
}
});
});
两者都要做:

$('#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*/});
     }
   });
});
$('#form1')。提交(函数(e)
{
e、 预防默认值();
$.ajax({
键入:“POST”,
url:'indextest1.php',
数据:$(“#form1”).serialize(),
成功:功能(响应){
$('#msg').html(“现在坐下来放松一下…”);
$('.color block').css({/*此处为css样式*/});
}
});
});

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

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

你不能在同一个函数中更新你的第二个div吗?我不知道,可能吧。我该怎么做呢?像这样$(“#msg”和&&“#color block”).html我最近才开始使用/学习JavaScript,所以不太确定。我看过api文档,但它没有提到类似的内容。哦,我能添加一个新行吗$(“#色块”).html………@DanCundy是的,见我的答案。你能不能在同一函数中更新你的第二个div?我不知道,可能。我该怎么做呢?像这样$(“#msg”和&&“#color block”).html我最近才开始使用/学习JavaScript,所以不太确定。我看过api文档,但它没有提到类似的内容。哦,我能添加一个新行吗$(“#color block”).html………@DanCundy是的,请看我的答案。嘿,adeneo,我正要为“延迟对象jQuery的范围”找到任何内容。让我困惑的是,如果我有几个