JS定时器如何实现提交成功提示功能

 更新时间:2020-06-14 00:00:30   作者:佚名   我要评论(0)

应用场景:
  用户评论后,在合适位置弹出“评论成功”,2秒钟后自动消失,提示用户评论成功。
HTML:


{#评论成功提示#}
<div class="popup_con" style="display

应用场景:

  用户评论后,在合适位置弹出“评论成功”,2秒钟后自动消失,提示用户评论成功。

HTML:

{#评论成功提示#}
<div class="popup_con" style="display: none; margin-left: 300px">
    <div class="popup" >
        <p style="color: red; font-size: 16px">评论成功!</p>
    </div>
    <div class="mask"></div>
 </div>

js:

// 评论成功提示定时器
 // 定一定时器函数
 function showSuccessMsg() {
   $('.popup_con').fadeIn('fast', function () {
     setTimeout(function () {
       $('.popup_con').fadeOut('fast', function () {
       });
     }, 2000)
   });
 }

 // 提交评论
 $("#form_comment").submit(function (event) {
   event.preventDefault();
   var comment = $('#comment').val();
   var data = {
     "comment": comment
   };
   $.ajax({
     url: "/task_mgm/taskinfo_comment=" + taskId,
     type: "POST",
     data: JSON.stringify(data),
     contentType: "application/json", // 传给后端的数据类型
     dataType: "json", // 接收后端的数据类型
     success: function (resp) {
       if (resp.error == 'OK') {
              showSuccessMsg();
              {#alert('评论成功');#}
              $('#comment').val(''); //清空评论框
            } else {
              alert('评论失败');
            }
          }
        })
      })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 解决IDEA JSP没有代码提示问题的几种方法
  • JS实现提示效果弹出及延迟隐藏的功能
  • Python解析json时提示“string indices must be integers”问题解决方法
  • 解决eclipse中没有js代码提示的问题
  • 基于JS实现html中placeholder属性提示文字效果示例
  • VSCode中如何利用d.ts文件进行js智能提示
  • 为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
  • 前端防止用户重复提交js实现代码示例

相关文章

  • JS定时器如何实现提交成功提示功能

    JS定时器如何实现提交成功提示功能

    应用场景:   用户评论后,在合适位置弹出“评论成功”,2秒钟后自动消失,提示用户评论成功。 HTML: {#评论成功提示#} <div class="popup_con" style="display
    2020-06-14

最新评论