如何添加 AJAX 表单提交错误警报？答案

【问题标题】：How to add AJAX Form-Submission Error Alert?如何添加 AJAX 表单提交错误警报？
【发布时间】：2020-11-24 01:21:25
【问题描述】：

这里是网络开发新手。我添加了一个基于教程的 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 包含的消息（用双星号包裹）是我在处理表单数据时出现错误时想要显示的内容。

AJAX：

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

【问题讨论】：

表单失败？基于xhr.onerror = function(){ /* do stuff */ }?我猜你的意思是基于 PHP 正则表达式测试的失败。做这些测试并像echo json_encode($objOrAssoc)一样从PHP发回。然后xhr.onload = function(){ const obj = JSON.parse(this.responseText); /*obj is your object from PHP*/ }.
@StackSlave 对不起，当我说“失败”时，我想我说错了。我的问题是，表单提交后，如果 submit.php 在运行后无法插入新的数据库条目，加载的 GIF 将保持可见。因此，虽然我在测试 atm 时没有遇到任何错误，但如果发生这种情况，我想编写一个警报以通知用户未收到他们的表单提交。

标签： php jquery ajax forms submission

【解决方案1】：

在澄清我对@StackSlave 评论的问题并进一步思考我想要完成的工作后，我意识到我需要做的就是复制成功：函数下的 if 语句并将其粘贴为 else if 语句数据！==保存，然后将 #successMsg 更改为 #errorMsg 以获取我的新 div 消息。谢谢。

【讨论】：