Ajax表单不显示html

我有一个基于ajax的反馈表单，并且在表单中显示来自响应的html的问题。Ajax表单不显示html

jQuery代码是

$(document).ready(function() { 
var form_holder = $('#form-holder'); 
var form_holder_feedback = ''; 
$('.submit button').click(function() { 
    var name = $('[name=name]').val(); 
    var email = $('[name=email]').val(); 
    var message = $('[name=message]').val(); 

    $.ajax({ 
     url: 'email/email.php', 
     type: 'POST', 
     data: {name: name, email: email, message: message}, 
     dataType: 'html', 
    }) 
    .success(function(html) { 
     form_holder_feedback = html; 
     console.log(form_holder_feedback); 
    }) 
    .error(function(html) { 
     form_holder_feedback = '<strong>There was an error!</strong>'; 
    }) 

    form_holder.animate({ 
     'marginLeft': '840px' 
    },300,'swing', function() { 
     form_holder.css({ 
      'display' : 'none', 
      'margin-left': '0' 
     }).html(form_holder_feedback).fadeIn('slow'); 
    }); 
}); 

});

会发生什么事的形式发送数据，并得到处理和电子邮件被发送。但php电子邮件文件回显的html没有显示出来。

我已经添加了console.log(form_holder_feedback);来测试发送表单后的值，它回来了与PHP电子邮件发件人回应的行。

来源

2014-01-09 Ronald Fernandes

尝试在.html（“Static Text goes here”）中分配静态文本并查看它是否正在更改div的文本。如果你没有得到它，这意味着在form_holder.animate中有一些错误（{... block – nextgtech

显示您form_holder后，你的Ajax完成

.success(function(html) { 
     form_holder_feedback = html; 
     console.log(form_holder_feedback); 
     showFeedback(form_holder_feedback); 
});

将代码放在一个函数里面 -

function showFeedback(fb){ 
    form_holder.animate({ 
     'marginLeft': '840px' 
    },300,'swing', function() { 
     form_holder.css({ 
      'display' : 'none', 
      'margin-left': '0' 
     }).html(fb).fadeIn('slow'); 
    }); 
}

来源

2014-01-09 08:42:42

是的，但这有效，但是有一些代码重复，谢谢 –

你的回调（即设置form_holder_feedback）您.html呼叫form_holder后正在执行。您需要将该代码放入回调中。为了节省一些代码重复，你应该把它放在一个函数中。

$(document).ready(function() { 
    var form_holder = $('#form-holder'); 
    var form_holder_feedback = ''; 
    var animateForm = function() { 
     form_holder.animate({ 
      'marginLeft': '840px' 
     },300,'swing', function() { 
      form_holder.css({ 
       'display' : 'none', 
       'margin-left': '0' 
      }).html(form_holder_feedback).fadeIn('slow'); 
     }); 
    } 

    $('.submit button').click(function() { 
     var name = $('[name=name]').val(); 
     var email = $('[name=email]').val(); 
     var message = $('[name=message]').val(); 

     $.ajax({ 
      url: 'email/email.php', 
      type: 'POST', 
      data: {name: name, email: email, message: message}, 
      dataType: 'html', 
     }) 
     .success(function(html) { 
      form_holder_feedback = html; 
      animateForm(); 
     }) 
     .error(function(html) { 
      form_holder_feedback = '<strong>There was an error!</strong>'; 
      animateForm(); 
     }) 
    }); 
});

来源

2014-01-09 08:44:11 Pinpickle

这工作完美。 –

Ajax表单不显示html

回答

相关问题