如何添加 AJAX Form-Submission Error Alert?

How to add AJAX Form-Submission Error Alert?

Web 开发新手在这里。我添加了一个基于教程的 PHP-AJAX-jQuery 表单,它还具有加载 GIF。在测试中,我发现如果任何表单提交成功插入新的数据库条目,并且在任何情况下提交失败,表单下方隐藏的、包含 div 的“提交成功”消息将替换正在加载的 GIF插入一个新的数据库条目,加载中的 GIF 将保持可见,不会再发生任何事情。 我想知道我是否可以对 AJAX 代码进行相对简单的更改,以便如果表单提交未能生成新的数据库条目,那么加载 GIF 将被隐藏,另一个 div -contained 警报会显示(例如下面代码中用双星号包裹的新 div-contained 警报)?或者,如果该选项比我意识到的更复杂,我感谢任何关于集成 AJAX 警报以简单地通知用户未收到表单提交的建议。谢谢!

<form id="contact">
  ...
  <button name="submit" type="submit" id="submitBtn">Submit</button>
  <img src="../../images/loading-dots.gif" id="loader" style="display: none">
</form>
<div id="successMsg" class="style_success">Message sent successfully!</div>
**<div id="errorMsg" class="style_error">An error occurred. Please try contacting us via email instead.</div>**

*Last div-contained 消息(由双星号包裹)是我想在处理表单数据时出现错误时显示的消息。

$("#submitBtn").hide('fast');
$("#loader").show('fast');
$.ajax({
    url:"private/php_scripts/submission.php",
    data:{key:"saveData",name:name,email:email,message:message},
    method:"POST",
    success:function (response) {
        var data = response.split('^');
        if (data[1] == "saved") {
            $("#submitBtn").show('fast');
            $("#loader").hide('fast');
            $("#successMsg").show('fast');
            $("#successMsg").fadeOut(10000);
            $("form#contact").each(function () {
                this.reset();
            });
        }
    }
});

在针对@StackSlave 的评论澄清我的问题并进一步思考我想要完成的事情后,我意识到我需要做的就是复制 success:function 下的 if 语句并将其粘贴为else if 数据语句!==已保存,然后将我的新 div 消息的 #successMsg 更改为 #errorMsg。谢谢。