Java Web Authentication 시스템의 개발에서 고객은 데이터 업데이트가 페이지에서 프롬프트 상자를 팝업하기 위해 데이터 업데이트가 필요하므로 옆에있는 직원이 새로운 데이터가 적시에 제출되었음을 즉시 알 수 있습니다. 적시 푸시 기술을 사용하는 것 외에도 AJAX를 사용하여 이러한 기능을 구현할 수도 있습니다.
코드 구현 원칙은 페이지에서 AJAX 요청을 시간에 실행할 수 있도록하는 것입니다. 얻은 데이터가 최신 상태 인 경우 음성 프롬프트 및 팝업 박스 프롬프트를 실행해야합니다. 이 구현의 단점은 데이터베이스가 자주 호출 되며이 방법은 사람이 적은 시스템에만 적합하다는 것입니다.
1. 음성 프롬프트를 추가하십시오
<audio id = "sound"autoplay = "autoplay">
재생 음성 파일 코드를 동적으로 추가합니다.
document.getElementById ( "sound"). src = "<%= basepath%> admin/media/global.wav";
2. 동적 팝업 메시지 프롬프트 상자 :
여기서는 jquery.gritter.js 및 jquery.gritter.css 및 특정 구현 코드를 가져 왔습니다.
jQuery (document) .ready (function () {setInterval (function () {$ .post ( 'ajax/linecheck', function (data) {var JSON = EVAT ( "("+data+")"); $. 각 (json, function, index, item) {$ ( "#line"+item.id) .html ( "") $. 각 (item.locallist, function, function (index, item2)) {if (item2.AttendOclist! = "") {$ "+initem.id). id = 'in "+item2.id+"'> <div class = 'avatar'> "+item2.location+"</div> <div class = 'message'> <ul id = li "+item2.id+"> </ul> </div> </li> ")} $. 각 (item2.attendoclist, function (index, item3) {if (item3.status == 0) {$ ("#li "+item2.id) .append ("<li class = 'user'> < 'username'> "+item3.person_+"+"+" style = 'color;'class = 'username'> time : "+item3.today+" "+item3.times+"</span> <br> <span class = 'username'> tel : "+item3.person_phone+"</span <span class = 'username'> id : "+item3.card_id+"</span> </li> <hr> ");} else {$ ("#li "+item2.id) .append ("<li class = 'user'> <span class = 'username'> "+item33.person_name+"<br Style = <span time '> "+item3.today+" "+item3.times+"</span> <br> <span class = 'username'> 전화 : "+item3.person_phone+"</span> <br> <span class = 'username'> id : "+item3.card_id+"</span> </li> <hr> "); docut item3.person_name+"("+item2.location+")", 텍스트 : "<span class = 'username'>"+item3.person_name+"</span> <br> <span style = 'color; class = 'username'> tel : "+item3.person_phone+"</span> <br> <span class = 'username'> id : "+item3.card_id+"</span> ", true : time : ', class_name :'my-sticky class '}); settimeout (function () {$ .gritter.remove (forev, {fade, fade, fade, fade, fade). 'slow'});}, 12000);}, 2000);}});});});});});});});}, 2000); });위의 컨텐츠는 JS 프롬프트 박스가 실시간으로 새 메시지를 표시하고 프롬프트 사운드를 제공하는 구현 코드입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!