如何添加AJAX表单提交错误提醒？

Question

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

HTML 表单：

<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>**

*最后一个 div 包含的消息（用双星号括起来）是我想要在处理表单数据时出现错误时显示的消息。

阿贾克斯：

$("#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();

            });

        }

    }

});

Answer 1

意识到我需要做的就是复制 success:function 下的 if 语句并将其粘贴为数据的 else if 语句！= =已保存，然后将我的新 div 消息的 #successMsg 更改为 #errorMsg。谢谢。