In the development of Java web authentication system, customers require data updates to pop up a prompt box on the page, so that the staff next to them can promptly know that new data has been submitted in a timely manner. In addition to using timely push technology, we can also use ajax to implement these functions.
The principle of code implementation is to enable timed execution of ajax requests on the page. If the data obtained is in the latest state, voice prompts and pop-up box prompts must be executed. The disadvantage of this implementation is that the database is frequently called, and this method is only suitable for systems with fewer people.
1. Add voice prompts
<audio id="sound" autoplay="autoplay">
Dynamically add the playback voice file code:
document.getElementById("sound").src="<%=basePath%>admin/media/global.wav";2. Dynamic pop-up message prompt box:
Here I imported jquery.gritter.js and jquery.gritter.css, and the specific implementation code:
jQuery(document).ready(function() { setInterval(function(){ $.post('ajax/linecheck',function(data){var json=eval("("+data+")");$.each(json,function(index,item){$("#line"+item.id).html("")$.each(item.localList,function(index,item2){if(item2.attendOCList!=""){$("#line"+item.id).append("<li class='in' id='in"+item2.id+"'><div class='avatar'>"+item2.location+"</div><div class='message'><ul id=li"+item2.id+"></ul></div></li>")}$.each(item2.attendOCList,function(index,item3){if(item3.status==0){$("#li"+item2.id).append("<li class='user'><span class='username'>"+item3.person_name+"</span><br><span style='color:red;' class='username'>Time: "+ item3.today+" "+item3.times +"</span><br><span class='username'>Tel:"+item3.person_phone+"</span><br><span class='username'>ID:"+item3.card_id+"</span></li><hr>");}else{$("#li"+item2.id).append("<li class='user'><span class='username'>"+item3.person_name+"</span><br><span style='color:red;' class='username'>Time: "+item3.today+" "+item3.times +"</span><br><span class='username'>Tel:"+item3.person_phone+"</span><br><span class='username'>ID:"+item3.card_id+"</span></li><hr>");document.getElementById("sound").src="<%=basePath%>admin/media/global.wav";setTimeout(function () {var unique_id = $.gritter.add({title: item3.person_name+"("+item2.location+")",text:"<span class='username'>"+item3.person_name+"</span><br><span style='color:red;' class='username'>Time: "+ item3.today+" "+item3.times +"</span><br><span class='username'>Tel:"+item3.person_phone+"</span><br><span class='username'>ID:"+item3.card_id+"</span>",sticky: true,time: '',class_name: 'my-sticky-class'});setTimeout(function () {$.gritter.remove(unique_id, {fade: true,speed: 'slow'});}, 12000);}, 2000);}});});});});});});},2000); });The above content is the implementation code that the JS prompt box pops up a new message in real time and has a prompt sound. I hope it will be helpful to everyone!