En el desarrollo del sistema de autenticación web de Java, los clientes requieren actualizaciones de datos para que aparezcan un cuadro de solicitud en la página, de modo que el personal a su lado pueda saber de inmediato que se han enviado nuevos datos de manera oportuna. Además de usar la tecnología de empuje oportuna, también podemos usar AJAX para implementar estas funciones.
El principio de implementación del código es habilitar la ejecución cronometrada de las solicitudes AJAX en la página. Si los datos obtenidos están en el último estado, se deben ejecutar las indicaciones de voz y las indicaciones emergentes. La desventaja de esta implementación es que la base de datos se llama con frecuencia, y este método solo es adecuado para sistemas con menos personas.
1. Agregar indicaciones de voz
<audio id = "sonido" autoplay = "autoplay">
Agregue dinámicamente el código de archivo de voz de reproducción:
document.getElementById ("sonido"). src = "<%= basepath%> admin/medios/global.wav";2. Cuadro de solicitud dinámico de mensaje emergente:
Aquí importé jQuery.gritter.js y jQuery.gritter.css, y el código de implementación específico:
jQuery (documento) .Ready (function () {setInterval (function () {$ .post ('ajax/linecheck', function (data) {var json = eval ("("+data+")"); $. Cada (json, function (index, item) {$ ("#línea"+item.id) .html ("") $. Cada (item.locallist, function (index, item) id = 'en "+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 estilo = 'color: rojo;' 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: rojo;' class = 'useName' "+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 (" sonido "). src =" <%= basepath%> admin/medios/global.wav "; setTimeout (function () {var unique_id = $ .gritter.add ({Title:: Title:: item3.person_name+"("+item2.location+")", texto: "<span class = 'username'>"+item3.person_name+"</span> <br> <span style = 'color: rojo;' 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, — verdadero: speed '}); setTimeout (function () {$ .Gritter.remove (unique_id,‘ fat. 'lento'});}, 12000);}, 2000);}});});});});});});}, 2000); });El contenido anterior es el código de implementación que el cuadro de inmediato JS aparece un nuevo mensaje en tiempo real y tiene un sonido rápido. ¡Espero que sea útil para todos!