附加文本并使用淡入淡出添加类答案

【问题标题】：Append text and add class with fadeIn附加文本并使用淡入淡出添加类
【发布时间】：2019-04-03 12:35:45
【问题描述】：

我有一个带有AJAX 的表格。当submit 成功或失败时，我想使其成为fade in。如果是成功script 将class has-success 添加到div 并使用append 更改内容。我想在更改内容和课程时将其设为fade in。我在append 之后尝试了fadeIn(500)，但没有成功。你可以看到一个活生生的例子here。

<div class="container">
<form class="ajaxForm" action="https://formcarry.com/s/YN2IlAj4rfL" method="POST" accept-charset="UTF-8" >
<div class="form-group">
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" name="Correo" placeholder="Correo electrónico"><!-- use this to reply visitors and prevent spam via akismet -->
</div>
<div class="form-group"><input type="text" class="form-control" id="nombre" name="Nombre" placeholder="Nombre"></div>
<div class="form-group"><textarea rows="4" class="form-control" id="textarea" name="Mensaje" placeholder="Cuéntanos"></textarea></div>
<input type="hidden" name="_gotcha"><!-- use this to prevent spam -->
<div class="form-group"><input type="submit" class="btn-contacto float-right"><div class="spinner-border" role="status">
  <span class="sr-only">Cargando...</span>
</div></div></div></form></div>

JQuery:

$(function(){
    $(".ajaxForm").submit(function(e){
        $('.spinner-border').css("display", "block");
        e.preventDefault();
        var href = $(this).attr("action");
        $.ajax({
            type: "POST",
            dataType: "json",
            url: href,
            data: $(this).serialize(),
            success: function(response){
                if(response.status == "success"){
        $(".ajaxForm").html(response).addClass("has-success");
        $(".ajaxForm").append( "<p>¡Gracias! Contactaremos contigo lo antes posible.</p>" ).fadeIn(500);

                }else{
                    alert("An error occured.");
                }
            }
        });
    });
});

【问题讨论】：

标签： jquery css ajax

【解决方案1】：

嘿，首先检查一下这个解决方案，你需要从你的服务器发回响应。

if (isset($_POST['Correo'])) {
// your server side logic or send success or failed response
echo json_encode(['status' => 'success']);die;
}


 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
 <body>
<div class="container">
<form class="ajaxForm" action="https://formcarry.com/s/YN2IlAj4rfL" method="POST" accept-charset="UTF-8" >
 <div class="form-group">
 <input type="email" class="form-control" id="email" aria-describedby="emailHelp" name="Correo" placeholder="Correo electrónico"><!-- use this to reply visitors and prevent spam via akismet -->
  </div>
  <div class="form-group"><input type="text" class="form-control" id="nombre" name="Nombre" placeholder="Nombre"></div>
  <div class="form-group"><textarea rows="4" class="form-control" id="textarea" name="Mensaje" placeholder="Cuéntanos"></textarea></div>
  <input type="hidden" name="_gotcha"><!-- use this to prevent spam -->
  <div class="form-group"><input type="submit" class="btn-contacto float-right"><div class="spinner-border" role="status">
  <span class="sr-only">Cargando...</span>
  </div></div></div></form></div>`

Javascript 代码我在表单后附加消息

$(function(){
$(".ajaxForm").submit(function(e){
        $('.spinner-border').css("display", "block");
$(document).find('#msg').remove();e.preventDefault();
var href = $(this).attr("action");
$.ajax({
    type: "POST",
    dataType: "json",
    url: href,
    data: $(this).serialize(),
    success: function(response){
    $('.spinner-border').css("display", "hide");
    $(".ajaxForm").addClass("has-success");
    $(".ajaxForm").after( "<p id='msg'>¡Gracias! Contactaremos contigo lo antes posible.</p>" ).fadeIn(500);
}else{
      $('.spinner-border').css("display", "hide");  
                alert("An error occured.");
            }
        }
    });
});
});

希望这能解决您的问题。让我知道是否为您工作

【讨论】：

我的页面是静态 html，所以 $_post 调用对我不起作用。
$post logic all you need to <form class="ajaxForm" action="https://formcarry.com/s/YN2IlAj4rfL" method="POST" accept-charset="UTF-8" > in this page you submit your form you need to send resonse usig json_ecode() 希望你理解
那么我在哪里插入这个？ if (isset($_POST['Correo'])) { // 你的服务器端逻辑或发送成功或失败响应 echo json_encode(['status' => 'success']);die; } 在
标签之前？
@PedroCorcheroMurga 没有你想在哪里提交你的表单它的服务器端示例。当提交表单时，检查网络部分中的帖子 url，然后在目标 url 上添加逻辑，这是您提交表单的formcarry.com/s/YN2IlAj4rfL
@PedroCorcheroMurga 或者简单的你可以插入我的 js 代码并提交表单并将其添加到 ajax success: function(response){console.log(response);} 检查您的回复并根据您的回复添加逻辑