时间戳

首页 > 解决方案 > 如何添加 AJAX 表单提交错误警报？

php - 如何添加 AJAX 表单提交错误警报？

问题描述

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

*最后一个包含 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();
            });
        }
    }
});

标签： phpjqueryajaxformssubmission

解决方案

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

推荐阅读