Ajax 发布数据并返回错误消息答案

【问题标题】：Ajax Post Data and return with error messageAjax 发布数据并返回错误消息
【发布时间】：2016-01-13 09:48:50
【问题描述】：

我目前有下面的代码，它从一堆动态表单中提交表单数据，这运行良好，并返回成功或失败的通知并将其插入到 div #info 但是当错误或成功显示在该页面摆脱通知的唯一方法是刷新或导航到另一个页面

<script>
    $(function() {
        $(document).on('submit', 'form.frm_details', function(event) {
            event.preventDefault();
            $.ajax({
                url: '/limitless/functions2.php',
                type: 'post',
                dataType: 'json',
                data: $(this).serialize(),
                success: function(data) {
                    if (data.status == '1') {
                        $('#info').addClass('alert alert-success alert-styled-left alert-arrow-left alert-bordered').html(data.message);
                        $('.my-modals').modal('hide');
                        document.getElementById('frm_details0').reset();
                    }
                }
            });
        });
    });
</script>

所以我的问题是我怎样才能做到这一点，以便您单击通知窗口右侧的链接或 x 按钮以关闭或隐藏 div

我附上了通知窗口的图片副本，页面上除了下面的脚本之外唯一的代码是

【问题讨论】：

可以使用 setTimeout(function(){$('#info').hide();} , 3000);
首先不要使用 ID 使用 classe，有时在前面加上“js-” 是个好主意，至少你知道哪个是 javascript 哪个是样式。为什么不直接添加一个点击事件来隐藏/淡化通知框呢？
是的，它只是信息

我已经提供了在上面的脚本中创建通知并在页面上显示为信息 div 的所有内容
$('.js-info').click(function(){ $(this).hide() });这将工作点击 div，如果你想要一个锚点击然后： $(this).parent().hide();
@TezWingfield 这正是我希望我如何使用与上述相同的方法实现它

【解决方案1】：

根据 cmets：

<script>
    $(function() {
        $(document).on('submit', 'form.frm_details', function(event) {
            event.preventDefault();
            $.ajax({
                url: '/limitless/functions2.php',
                type: 'post',
                dataType: 'json',
                data: $(this).serialize(),
                success: function(data) {
                    if (data.status == '1') {
                        $('#info').addClass('alert alert-success alert-styled-left alert-arrow-left alert-bordered').html(data.message);
                        $('.my-modals').modal('hide');
                        document.getElementById('frm_details0').reset();
                    }
                }
            });
        });
      //preferably anchor tag
      $('.some-close-element').click(function(e)
      {
         e.preventDefault();
         $(this).parent().hide();
      });
    });
</script>

这假设您在信息警报框内添加一个锚标记，最终关闭警报框。

【讨论】：

需要对 div 进行哪些更改才能使其正常工作
修改你的代码后 $('#info').click(function(e) { $(this).hide(); });这隐藏了通知 div 无论如何都可以缩短代码
我想有几种可能性，但需要稍微重组......老实说，你正在应用一个事件处理程序，它非常易读，大约 60 个字符 - 无需混淆逻辑。您可以删除事件 (e)。请注意，您可以使用：codereview.stackexchange.com 来帮助重构逻辑。
经过深思熟虑和测试后，此方法会在会话的其余部分隐藏事件，然后不会显示任何其他事件，因此此方法对我不起作用，但这是我最初要求的
添加了我对这个问题的回答，但感谢您抽出时间为我指明了导致我得到答案的方向

【解决方案2】：

您可以在从 ajax 获取响应的一段时间后隐藏通知：

  if (data.status == '1') {
        $('#info').addClass('alert alert-success alert-styled-left alert-arrow-left alert-bordered').html(data.message);
        setTimeout( function(){
           $('#info').hide();} , 
        3000); 
        //or                                                                                
            $("#info").delay(4000).hide();
            $('.my-modals').modal('hide');
            document.getElementById('frm_details0').reset();
}

【讨论】：

【解决方案3】：

在对该站点进行更多研究后，我认为警报都错了，我应该按照此处的讨论解除警报

Bootstrap successful alert in updating record Ajax

然而，在彻底阅读我的反复试验后，我的解决方案如下

    $('#info').html('<div class="alert alert-danger alert-styled-left alert-arrow-left alert-bordered">'  + data.message + '<button type="button" class="close" data-dismiss="alert" >×</button></div>');

【讨论】：