Bei der Entwicklung des Java -Webauthentifizierungssystems benötigen Kunden Datenaktualisierungen, um ein Eingabeaufforderungfeld auf der Seite zu überholen, damit die Mitarbeiter neben ihnen umgehend wissen, dass neue Daten rechtzeitig eingereicht wurden. Neben der rechtzeitigen Push -Technologie können wir AJAX auch verwenden, um diese Funktionen zu implementieren.
Das Prinzip der Code -Implementierung besteht darin, die zeitliche Ausführung von AJAX -Anforderungen auf der Seite zu aktivieren. Wenn sich die erhaltenen Daten im neuesten Zustand befinden, müssen Spracheingabeaufforderungen und Popup-Box-Eingabeaufforderungen ausgeführt werden. Der Nachteil dieser Implementierung ist, dass die Datenbank häufig aufgerufen wird und diese Methode nur für Systeme mit weniger Personen geeignet ist.
1. Fügen Sie Sprachanforderungen hinzu
<Audio ID = "Sound" autoplay = "autoplay">
Fügen Sie dynamisch den Code der Wiedergabe -Sprachdatei hinzu:
document.getElementById ("Sound"). src = "<%= Basepath%> admin/media/global.wav";2. Dynamische Popup-Nachrichten-Eingabeaufforderung Box:
Hier habe ich jQuery.gritter.js und jQuery.gritter.css und den spezifischen Implementierungscode importiert:
JQuery (Dokument) .Ready (function () {setInterval (function () {$ .post ('ajax/lineCeck', function (data) {var json = eval ("("+data+")"); $. jeweils (json, function (index, itel) {$ ("#line"+it it.id) .html ("") $. Jeweils (item.locallist, function (index, idex) {if (item2.attendoclist! = ") {$ ("#"#line". id = 'in "+item2.id+"'> <div class = 'avatar'> "+item2.Location+" </div> <div class = 'message'> <ul id = li "+item2.id+"> </ul> </div> </li> ")} $. Jeweils (item2.attendoclist, function (index, identifizieren) {if (item3.Status == 0) {$ ("#li "+item2.id) .And (" <li class = 'user'> <span classe = 'username'> username '> username'> username '> username'> username> username> style = 'color: rot;' class = 'userername'> Zeit: "+item3.today+" "+item3.times+" </span> <br> <span class = 'userername'> 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 = 'userername'> Tel.: "+item3.person_phone+" </span> <br> <span class = 'userername'> id: "+item3.card_id+" </span> </li> <hr> "); document.getElementById (" Sound "). item3.person_name+"("+item2.location+")", text: "<span class = 'userername'>"+item3.person_name+"</span> <br> <span style = 'color: rot;' class = 'username'> time:"+item3.today+"+ class = 'userername'> tel: "+item3.person_phone+" </span> <br> <span class = 'userername'> id: "+item3.card_id+" </span> ", klebrig: tim, time: '', class_name: 'my-sticky class'}); 'langsam'});}, 12000);}, 2000);}});});});});});});}, 2000); });Der obige Inhalt ist der Implementierungscode, den das JS -Eingabeaufforderung -Box in Echtzeit eine neue Nachricht erbringt und einen Eingabeaufenthaltsklang enthält. Ich hoffe, es wird für alle hilfreich sein!