Jquery中实现气泡消息提示

骑猪看日落 2023-10-18 14:53 112阅读 0赞

## 效果 ##

![Image 1][]![20190226102533148.jpg][]

## 实现 ##

### jsp页面代码 ###

页面通过一个隐藏的span标签实现，其中span标签的大小 通过class属性来控制，这里不是原生jquery的class的属性，不要全部复使用。

记住span的id。

### jquery代码 ###

实现思想是：

当页面加载完之后，通过ajax提交后台去查询数据，将查到的消息数传回前段，如果为0，则不显示span，如果不为0，则显示span，并将消息数量作为span的内容。

在js中：

$(function(){
    
          var url = "${ctx}/front/tbOnPurchaseAction/waitReceived";
         $.ajax({
          async : false,
             cache : false,
             type : 'POST',
             url : url,
             data :{dsType:'sysDs'},
               
             dataType:"json",
             success : function(data) {
              
              if(data.data==0){
                $("#orderComfirmRed").hide();
                
               }else{
                $("#orderComfirmRed").css("display","block");
                
                $("#orderComfirmRed").text(data.data); 
                
               }
               
               
             }
            });
      });

### 后台action代码 ###

@ResponseBody
     @RequestMapping("/waitReceived" )
     public Json waitReceived(@QueryParam("dsType")   @DefaultValue("sysDs") String dsType) {
      Json jsonResult = new Json();
      jsonResult.setTitle("红点");
      Integer count=0;
      String num=null;
      Map<String, Object>map=new HashMap<String,Object>();
      List<orderComfirm> data = new ArrayList<>();
      
      try {
       String code=SubjectUtil.getCurrentUser().getOrgCode();
       map.put("code", code);
       data = tbComfirmService.queryOrderComfirm(map);
       
       if (data.size()>0) {
         count=data.size();
        
        
       }
      
       if(count>=100) {
        num="99+";
       }else {
        num=count.toString();
       }
       jsonResult.setData(num);
       jsonResult.setStatus(true);
       jsonResult.setMessage("接口访问成功！");
      } catch (Exception ex) {
       LogService.getInstance(this).error("获取数据失败：" + ex.getMessage(), ex);
      }
     return jsonResult;
     }

[Image 1]: 
[20190226102533148.jpg]: https://img-blog.csdnimg.cn/20190226102533148.jpg