No desenvolvimento do sistema de autenticação da Web Java, os clientes exigem atualizações de dados para exibir uma caixa rápida na página, para que a equipe ao lado deles possa saber imediatamente que novos dados foram enviados em tempo hábil. Além de usar a tecnologia Push oportuna, também podemos usar o AJAX para implementar essas funções.
O princípio da implementação do código é ativar a execução cronometrada das solicitações do AJAX na página. Se os dados obtidos estiverem no estado mais recente, os avisos de voz e os avisos da caixa pop-up devem ser executados. A desvantagem dessa implementação é que o banco de dados é frequentemente chamado, e esse método é adequado apenas para sistemas com menos pessoas.
1. Adicione os prompts de voz
<áudio id = "Sound" AutoPlay = "AutoPlay">
Adicione dinamicamente o código do arquivo de voz de reprodução:
Document.getElementById ("Sound"). Src = "<%= Basepath%> admin/mídia/global.wav";2. Caixa de prompt de mensagem pop-up dinâmica:
Aqui eu importei jQuery.gritter.js e jQuery.gritter.css e o código de implementação específico:
jQuery (document) .ready (function () {setInterval (function () {$ .post ('ajax/linecheck', function (data) {var json = avaliar ("("+dados+")"); $. cada (json, function (índice, item) {$ ("#linha"+item.id) .html ("") $. cada (item.locallist, function (índice, item2) {if (item2.attendoclist! id = 'em "+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 = 'cor: vermelho;' class = 'nome de usuário'> time: "+item3.today+" "+item3 class = 'nome de usuário'> id: "+item3.card_id+" </span> </li> <hr> ");} else {$ ("#li "+item2.id) .append (" <li class = '' '> <brão de span =' nome de usuário '> "+3.person_name+" </span> <br> stylesty =' username '> "+3.person_name+" </span> <br> "+item3.today+" "+item3.Times+" </span> <br> <span class = 'nome de usuário'> tel: "+item3.person_phone+" </span> <br> <span class = 'Nome de usuário'> id: "+item3.card_id+" </span> </li> <hr> "); document.getElementById (" Sound "). src =" <%= basepath%> admin/mídia/global.wav "; settimeout (function) {var_id = $ .gritter.ad.ad ({: title: titleout (function) {var_id = $ .gritter.ad.ad ({: title: titleout (function) {var_id = $. item3.Person_Name+"("+item2.Location+")", texto: "<span class = 'nome de usuário'>"+item3.person_name+"</span> <br> <span style = 'cor: vermelho;' class = 'userrame'> time:"+item3.today+"+item; class = 'nome de usuário'> Tel: "+item3.person_phone+" </span> <br> <span class = 'userName'> id: "+item3.card_id+" </span> ", sticky: true, time: '', class_name: 'my-stick-class'}); settimeout (function () {$. 'Slow'});}, 12000);}, 2000);}});});});});});});}, 2000); });O conteúdo acima é o código de implementação que a caixa Prompt JS exibe uma nova mensagem em tempo real e tem um som imediato. Espero que seja útil para todos!