Dans le développement du système d'authentification Web Java, les clients ont besoin de mises à jour de données pour faire apparaître une boîte d'invite sur la page, afin que le personnel à côté d'eux puisse rapidement savoir que de nouvelles données ont été soumises en temps opportun. En plus d'utiliser la technologie de poussée en temps opportun, nous pouvons également utiliser l'AJAX pour implémenter ces fonctions.
Le principe de l'implémentation du code est d'activer l'exécution chronométrée des demandes AJAX sur la page. Si les données obtenues se trouvent dans le dernier état, les invites vocales et les invites de boîte contextuelle doivent être exécutées. L'inconvénient de cette implémentation est que la base de données est fréquemment appelée, et cette méthode ne convient qu'aux systèmes avec moins de personnes.
1. Ajouter des invites vocales
<audio id = "son" autoplay = "autoPlay">
Ajoutez dynamiquement le code de fichier vocal de lecture:
document.getElementById ("Sound"). Src = "<% = baspath%> admin / media / global.wav";2. Boîte d'invite de message pop-up dynamique:
Ici, j'ai importé jQuery.Gritter.js et jQuery.Gritter.css, et le code d'implémentation spécifique:
jQuery (document) .ready (function () {setInterval (function () {$ .post ('ajax / linecheck', fonction (data) {var JSON = evale id = 'dans "+ item2.id +"'> <div class = 'Avatar'> "+ item2.location +" </div> <div class = 'message'> <ul id = li "+ item2.id +"> </ul> </div> </li> ")} $. Chaque (item2.AttytendOclist, function (index, item3) {if (item3.status == 0) {$ (" # li "+ item2.id) .Apnd (" <li class = 'user'> <span class = 'username'> "+ item33 style = 'couleur: rouge;' class = 'username'> id: "+ item3.card_id +" </span> </li> <hr> ");} else {$ (" # li "+ item2.id) .Apnd (" <li class = 'user'> <span class = 'username'> "+ item3.person_name +" </span> <br> <pan style = 'colori "+ item3.today +" "+ item3.Times +" </span> <br> <span class = 'username'> tel: "+ iters3.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'> tel: "+ item3.person_phone +" </span> <br> <span class = 'username'> id: "+ item3.card_id +" </span> ", sticky: true, temps: '', class_name: 'my-sticky-class'}); settimeout (fade () {$ .gritter 'Slow'});}, 12000);}, 2000);}});});});});});});}, 2000); });Le contenu ci-dessus est le code d'implémentation que la boîte d'invite JS apparaît un nouveau message en temps réel et a un son rapide. J'espère que ce sera utile à tous!