效果

實現

jsp頁面代碼

<dd class="fl rel ml_05em text_12em">接貨確認<span id="orderComfirmRed" class="abs pl_05em pr_05em mt_05em top_0 right_0 c_white bor_rad_05em minus_mr_1em line_h_14em text_al_c bg_red-orange " style="display:none"></span> </dd>

頁面通過一個隱藏的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;}

?

總結

以上是生活随笔為你收集整理的Jquery中 实现气泡消息提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。